Crear páginas web con Nvu

Nvu le permite crear sus propias páginas y publicarlas en la web. No tiene que saber HTML para usar Nvu; es tan fácil de usar como un procesador de textos.

Los botones de la barra de herramientas y los menús le permiten añadir listas, tablas, imágenes, enlaces a otras páginas, colores y tipos de letra. Puede ver qué aspecto tendrá su documento en la web a medida que lo crea, y lo puede compartir fácilmente con otros usuarios, con independencia del tipo de navegador o programa de correo con soporte de HTML que utilicen.

Comenzar una nueva página

Crear una nueva página

Nvu es un editor de HTML (Hypertext Markup Language) que permite la creación y edición de páginas web. Además, es un editor WYSIWYG, por lo que se puede visualizar la forma en que se mostrará la página al tiempo que se crea. No es necesario conocer HTML ya que la mayoría de las funciones básicas del HTML se encuentran disponibles como órdenes en la barra de herramientas y en los menús.

Nvu también le permite la edición del código fuente HTML si lo desea. Para ver o editar el código fuente HTML, abra el menú Ver, y escoja Código fuente HTML, o pulse la pestaña Etiquetas <HTML> en la barra de herramientas de modo de edición de la parte inferior de la ventana de Nvu.

Para crear una página web utilice uno de los métodos que a continuación se describen. Una vez haya comenzado una página, puede agregar y editar texto de la misma manera en la que lo haría en un procesador de textos.

Para crear una nueva página en Nvu:

utilice uno de los métodos que  se describen a continuación.

Método 1:
Haga clic en el botón Nuevo  de la barra de redacción. Se creará la nueva página en una nueva pestaña.

Método 2:
  1. Seleccione el menú File > New
  2. Aparece la caja de crear nuevo documento
      
  3. En esta selecciona un documento en blanco (A blank document) y crear en Nueva Pestaña (New Tab).
  4. Clic Crear (Create) para crear la nueva pagina.
Método 3:
  1. Haga clic en la flecha del botón Nuevo  para desplegar el menú de opciones.
  2. Seleccione:

Para comenzar a partir de un archivo HTML almacenado en su disco local:

  1. Haga clic en el boton Open (Abrir)
    o seleccione el menú File > Open File (Abrir > Archivo)
  2. Se mostrará el cuadro de diálogo Abrir archivo HTML (Open HTML File).
  3. Localice en su disco local el archivo que desee editar.
  4. Haga clic en Abrir para mostrar el archivo escogido en la ventana de Nvu.

Para editar una página web:

  1. Seleccione el menú File > Open Web Location...(Archivo > Abrir dirección Web... ). Se mostrará el cuadro de diálogo 
  2. Escriba la URL de la página a editar (por ejemplo, http://www.mozilla.org) y haga clic en el botón Crear. Se mostrará la página en Nvu.

Nvu también da la opción de crear un documento nuevo usando el formato XHTML. Para crear un documento XHTML, active la opción crear un documento XHTML en el cuadro de diálogo Crear un nuevo documento o plantilla.

Consejo: en la ventana de Nvu se pueden abrir rápidamente los archivos con los que se ha estado trabajando más recientemente mediante la apertura del menú Archivo, seleccionando Páginas recientes y escogiendo el archivo deseado de la lista.

Ejercicio: Crea una pagina nueva. Escribe un encabezado sencillo y luego un par de párrafos describiéndote a ti mismo, este curso, tus proyectos o tus clases. Por ahora trabaja en el documento como lo harías en un procesador de textos. Mas tarde cubriremos cambios al texto (estilos de fuentes, colores, espacios, etc.)

Pestañas - Editar varios documentos

Nvu permite editar varios documentos al mismo tiempo. En lugar de cambiar de una ventana a otra para editar más de un documento, Nvu ofrece la posibilidad de las Pestañas. Se pueden abrir varios documentos al mismo tiempo con Nvu en la misma ventana pero en distintas pestañas.

Las pestañas pueden abrirse usando Ctrl+T o bien seleccionando Crear en: Nueva pestaña dentro del cuadro de diálogo Crear un nuevo documento o plantilla. Aunque se tengan varias pestañas abiertas, cada una es gestionada independientemente. Se indica el estado de cada documento; por ejemplo, si ha sido modificado y necesita ser guardado, aparecerá un icono de un disquete rojo en la pestaña correspondiente.

Guardar y visualizar la nueva página

Se pueden guardar los documentos de Nvu como HTML o como sólo texto. Al guardar un documento en HTML se mantiene el formato del documento, como los estilos de texto (por ejemplo, negrita o cursiva), tablas, enlaces e imágenes. Al guardar un documento como formato de sólo texto se eliminan todas las etiquetas HTML pero se mantiene el texto del documento.

Para guardar un documento como archivo HTML:

Para cambiar el nombre o la dirección de un archivo HTML existente:

Cuando guarda una página en Nvu, todos los componentes de la página (el HTML, las imágenes y otros archivos, tales como archivos de sonido y hojas de estilo), se guardan en el disco local. Si sólo quiere guardar la parte HTML de la página, debe cambiar la preferencia de Nvu relativa al almacenamiento de páginas. Vea Preferencias de Nvu para más información sobre cómo cambiar la configuración de Nvu al guardar páginas.

Si la dirección de una imagen es absoluta (comienza con http://) y se encuentra conectado a Internet, continuará viendo la imagen en el documento tanto en Nvu como en Navigator. Sin embargo, si la dirección de la imagen es relativa a la dirección de la página (comienza con file:///), entonces no verá la imagen en la versión local del documento.

Para guardar un documento como archivo de sólo texto:

  1. Abra el menú File > Export to Text... (Archivo > Exportar a texto...).
  2. Introduzca el nombre y la ubicación en la que se desea guardar el archivo.

Nota: las imágenes no aparecen en los documentos guardados en formato de sólo texto.

Consejo: se puede escoger Revertir desde el menú Archivo para retomar la copia más recientemente guardada del documento en el que se está trabajando. Tenga en cuenta que los cambios actuales se perderán.

Ejercicio: Guarda la página que creaste anteriormente con el nombre index.html en la carpeta public_html.

Para ver la página en una ventana del navegador con el fin de hacer comprobaciones:

Establecer las propiedades de la página

Establecer las propiedades de la página y las etiquetas Meta

Utilice el cuadro de diálogo Propiedades de la página para introducir propiedades como el título, autor y descripción del documento sobre el que se está trabajando. Esta información es útil si se planea utilizar la página en un sitio web ya que los motores de búsqueda utilizan este tipo de información para indexar su página. Se puede ver esta información desde la ventana del navegador escogiendo el menú Ver y seleccionando Información de la página.

  1. Seleccione el menú Format > Page Title and Properties... (Formato> Título de la página y propiedades...).
  2. Aparecerá la caja de diálogo de las Propiedades de la Página
  3. Edite cualquiera de las propiedades siguientes:
  4. Clic OK.

Ejercicio: Establecer las propiedades de su página index.html y de sus futuras páginas. Crea una nueva página y guardala con el nombre practicas.html en la carpeta public_html. En esta misma carpeta crea una subcarpeta llamada images

Establecer los colores y fondos de la página

Se puede cambiar el color de fondo o especificar una imagen como fondo de la página en la que se está trabajando. Esta elección afecta a la forma en que aparecerán el texto y los enlaces de la página a la gente que la visualice mediante un navegador.

Para establecer los colores y el fondo de la página actual, empezando desde la ventana de Nvu:

  1. Seleccione el menú Format > Page Colors and Background... (Formato>Color y fondo de la página...).

  2. Edite cualquiera de las siguientes propiedades:
  3. Clic OK.

Nota: para aplicar atributos adicionales o eventos JavaScript, haga clic en Edición avanzada... para visualizar el editor avanzado de propiedades.

También se puede establecer el fondo y colores predeterminados de la página para cada nueva página que se cree en Nvu.

Ejercicio: Establece un color o una imagen de fondo a tu página practicas.html.

Una mirada al Código

Ejercicio: Dale una mirada al código.

Dar formato a las páginas web

Dar formato a párrafos, títulos y listas

Para aplicar un formato a un párrafo, comience desde la ventana de Nvu:

  1. Haga clic para emplazar el punto de inserción donde quiera que comience el formato o seleccione el texto al que desea aplicar el formato.
  2. Escoja un formato de párrafo utilizando la lista desplegable de la barra de herramientas de formato
    o desde el menú Format > Paragraph :

Para dar formato de titular al texto:

  1. Haga clic para emplazar el punto de inserción en cualquier sitio dentro del texto al que desea aplicar el formato.
  2. Utilice la lista desplegable de la barra de formato y escoja el grado de titular que desee, desde 1 (mayor) a 6 (menor). Por ejemplo, escoja Título 1 para el título principal, Título 2 para el siguiente nivel, y así sucesivamente.

Ejercicio: En cada una de las líneas que se dan a continuación, aplica el formato que ella indica:

Este es un titular de grado 2
Este es un cuerpo de texto
Este es un titular de grado 4
Este es un párrafo

Para dar formato a un elemento de una lista:

  1. Haga clic para emplazar el punto de inserción dentro de la línea de texto a la que se desea aplicar el formato.
  2. Abra el menú Formato y escoja Lista.
  3. Escoja el estilo de lista:

Truco: se puede aplicar rápidamente un estilo de lista a un bloque de texto seleccionando ese texto y haciendo clic sobre los botones de Lista numerada o Lista no numerada de la barra de formato.

Ejercicio: A las siguientes líneas de texto aplique el estilo de lista numerada:

Lunes

Martes

Miércoles

Jueves

Para cambiar el estilo de las viñetas o de los números:

  1. Haga clic para emplazar el punto de inserción dentro del texto del elemento de la lista que desea modificar o seleccione uno o más elementos de la lista si se desea aplicar un estilo nuevo a toda la lista entera.
  2. Abra el menú Formato y escoja Propiedades de la lista.
  3. Seleccione una viñeta o un estilo de numeración de la lista desplegable. En el caso de listas numeradas se puede especificar un número de comienzo. En el caso de las listas no numeradas se puede modificar el estilo de la viñeta.

Consejo: también puede hacer doble clic en una viñeta o número de la lista para mostrar el cuadro de diálogo de propiedades de la lista.

Para alinear un párrafo o texto de la página, por ejemplo, al centro, a la izquierda o a la derecha:

  1. Haga clic para emplazar el punto de inserción dentro del párrafo o la línea de texto que se desea alinear.
  2. Abra el menú Formato, escoja Alinear y seleccione un tipo de alineado.

Nota: también se puede utilizar la barra de formato para alinear el texto.

Ejercicio: A continuación de a cada línea de texto la alineación que ella indica:

Esta línea de texto está alineada al centro.

Esta línea de texto está alineada a la derecha.

Trabajar con listas

Para finalizar una lista y continuar escribiendo texto normal:

Para cambiar uno o más de los elementos de la lista a texto normal:

  1. Haga clic para emplazar el punto de inserción dentro del elemento de la lista o seleccione los elementos de la lista.
  2. Para una lista numerada, haga clic en el botón de lista numerada (o, para una lista no numerada, haga clic en el botón de lista no numerada) de la barra de formato.

Para colocar texto sangrado bajo un elemento de una lista:

  1. Haga clic para emplazar el punto de inserción dentro del elemento de la lista.
  2. Presione Mayús-Enter para crear el sangrado libre.
  3. Escriba el texto que desea sangrar.
  4. Presione Mayús-Enter para crear otro párrafo sangrado, o presione Enter para crear el siguiente elemento de la lista.

Truco: se puede incrementar o decrementar el sangrado de los elementos de la lista haciendo clic en cualquier lugar dentro de un elemento de la lista y pulsando a continuación los botones Sangrado o Desangrado de la barra de herramientas de formato. Alternativamente, puede hacer clic en cualquier lugar dentro de un elemento de la lista y pulsar Tab para aumentar el sangrado en un nivel. Pulse Mayús+Tab para reducir el sangrado en un nivel.

Para juntar dos listas adyacentes:

  1. Seleccione las dos listas que desea unir. Asegúrese de seleccionar todos los elementos de ambas listas. Tenga en cuenta que cualquier texto existente entre las dos listas también pasará a formar parte de la nueva lista.
  2. Haga clic sobre el botón de lista numerada o no numerada para juntar las listas.

Cambiar el color, estilo y tipo de letra

Para cambiar el estilo, color o tipo de letra del texto seleccionado:

  1. Seleccione el texto sobre el que desea aplicar el formato.
  2. Abra el menú Formato y escoja uno de los siguientes:

Ejercicio: En cada una de las líneas que se dan a continuación, aplica el color, estilo y tipo de letra que ella indica:

Esta linea es de color azul y cursiva.
Esta linea es de color verde y negrita.
Esta linea es de color azul, cursiva y subrayado.

Para cambiar el color de fondo de la página:

  1. Haga clic en cualquier punto de la página.
  2. Pulse el bloque de color de fondo en la barra de herramientas de formato.
  3. Escoja un color de fondo del cuadro de diálogo de color de fondo.
  4. Pulse Aceptar.

Truco: para cambiar con rapidez el color del texto al último utilizado, seleccione el texto, presione Mayús y haga clic sobre el selector de color. Esto es útil cuando se desea usar un único color en líneas de texto separadas.

También puede utilizar una imagen como fondo. Vea Configuración de fondos y colores de página.

Eliminar o deshabilitar los estilos de texto

Para eliminar todos los estilos de texto (negrita, cursiva y demás) de un texto:

  1. Seleccione el texto.
  2. Abra el menú Formato y escoja Eliminar todos los estilos de texto.
  3. Continúe escribiendo.

Para seguir escribiendo texto con todos los estilos eliminados:

  1. Emplace el punto de inserción donde desee deshabilitar los estilos de texto.
  2. Abra el menú Formato y seleccione Eliminar todos los estilos de texto.
  3. Continúe escribiendo.

Ejercicio: En cada una de las líneas que se dan a continuación,  elimina o deshabilita los estilos de texto:

Esta linea es de color azul y cursiva.
Esta linea es de color verde y negrita.
Esta linea es de color azul, cursiva y subrayado.

Buscar y reemplazar texto

Para buscar texto dentro de la página en la que se está trabajando:

  1. Haga clic para emplazar el punto de inserción donde desee comenzar la búsqueda.
  2. Abra el menú Editar y seleccione Buscar y reemplazar. Verá el cuadro de diálogo Buscar y reemplazar.
  3. Escriba el texto que desea localizar en el campo Buscar texto. Para acotar la búsqueda seleccione una o más de las siguientes opciones:
  4. Haga clic en Buscar siguiente para comenzar la búsqueda. Cuando Nvu localice la primera coincidencia, haga clic sobre Buscar siguiente para buscar la siguiente coincidencia.
  5. Haga clic sobre Cerrar cuando haya terminado.

Para buscar y reemplazar texto dentro de la página en la que se está trabajando:

  1. Haga clic para emplazar el punto de inserción donde desee comenzar la búsqueda.
  2. Abra el menú Editar y seleccione Buscar y reemplazar. Verá el cuadro de diálogo Buscar y reemplazar.
  3. Escriba el texto que desea localizar y el texto por el cual lo quiere reemplazar.
  4. Para acotar la búsqueda seleccione una o más de las siguientes opciones:
  5. Haga clic en Buscar siguiente para buscar la siguiente coincidencia. Nvu seleccionará la siguiente coincidencia del texto.
  6. Haga clic en Reemplazar para cambiar el texto seleccionado por el texto de reemplazo. Haga clic en Reemplazar y buscar para reemplazar el texto seleccionado y encontrar la siguiente coincidencia. Haga clic en Reemplazar todos para cambiar cada una de las coincidencias del del documento por el texto de reemplazo.
  7. Haga clic sobre Cerrar cuando haya terminado.

Insertar líneas horizontales

Las líneas horizontales se utilizan normalmente para separar diferentes secciones de un documento de forma visual. Para insertar una línea horizontal (también llamada regla) dentro de la página, comience desde la ventana de Nvu:

  1. Haga clic para emplazar el punto de inserción donde desee que aparezca la línea.
  2. Abra el menú Insertar y seleccione Línea horizontal.

Ejercicio: A continuación inserte una línea horizontal:

Establecer las propiedades de una línea horizontal

Se puede personalizar el alto, largo, ancho, alineación y sombreado de una línea.

  1. Haga doble clic en la línea para mostrar el cuadro de diálogo Propiedades de la línea horizontal.
  2. Edite cualquiera de estas propiedades:
  3. Haga clic sobre Usar como opción predeterminada para utilizar estas configuraciones como las predeterminadas para la próxima vez que se inserte una línea horizontal.
  4. Para editar manualmente las propiedades de la línea horizontal haga clic sobre Edición avanzada. Vea la sección Editor avanzado de propiedades, para mayor detalle.

Truco: se puede seleccionar Etiquetas HTML del menú Ver para que se muestren todos los elementos HTML en cajas amarillas. Se puede hacer doble clic sobre cualquiera de estas cajas para que se visualice el cuadro de diálogo del Editor avanzado de propiedades para esa etiqueta o elemento HTML.

Ejercicio:  Para la línea horizontal a continuación, establecer las siguientes propiedades: Anchura 50%, Altura 10 pixeles, Sombreado 3D y alineación centrada.


Insertar caracteres especiales

Para insertar caracteres especiales como tildes, marcas de copyright o símbolos monetarios:

  1. Haga clic para emplazar el punto de inserción donde desee que aparezca el carácter especial.
  2. Abra el menú Insertar y seleccione Caracteres y símbolos. Verá el cuadro de diálogo Insertar carácter.
  3. Seleccione una categoría de caracteres.
  4. Seleccione el carácter que desea insertar de la lista desplegable Carácter.
  5. Haga clic en Insertar.

    Se puede continuar escribiendo en el documento (o en una ventana de redacción de correo) mientras se mantiene el cuadro de diálogo abierto, si es que desea utilizarlo de nuevo.

  6. Haga clic en Cerrar cuando termine de insertar caracteres especiales.

Insertar elementos y atributos HTML

Si sabe cómo trabajar con el código fuente HTML podrá insertar etiquetas adicionales, atributos de estilo y JavaScript en la página. Si no está seguro de cómo trabajar con el código fuente, es preferible que no lo modifique. Para trabajar con el código fuente HTML siga uno de estos métodos:

Utilizar el editor avanzado de propiedades

Para añadir atributos HTML y JavaScript a objetos como tablas, imágenes y líneas horizontales se puede utilizar el editor avanzado de propiedades.

Nota: a menos que entienda claramente cómo añadir, eliminar o modificar los atributos HTML y sus valores asociados, es preferible que no utilice este editor.

Si no está viendo actualmente el cuadro de diálogo del editor avanzado de propiedades, lleve a cabo los siguientes pasos:

  1. Desde el menú Ver (o la barra de herramientas del modo de edición) escoja Etiquetas HTML.
  2. Haga doble clic sobre el objeto que desea modificar para abrir su cuadro de diálogo Propiedades.
  3. Haga clic en Edición avanzada para abrir el editor avanzado de propiedades del objeto. El editor avanzado de propiedades tiene tres pestañas, cada una de las cuales tiene una lista con las propiedades actuales del objeto seleccionado:
  4. Para editar una propiedad o atributo en cualquiera de estas tres pestañas, seleccione el atributo que desee editar. Podrá entonces editar el nombre del atributo o el valor mediante el uso de los campos editables Atributo y Valor de la parte inferior del cuadro de diálogo. Para añadir un nuevo atributo, escriba su nombre en el campo Atributo de la parte inferior del cuadro de diálogo. El nuevo atributo se añadirá automáticamente cuando haga clic en el campo Valor. Para eliminar un atributo, selecciónelo de la lista y haga clic en Eliminar.

    Nota: Los atributos obligatorios se encuentran resaltados en la lista de atributos.

  5. Haga clic sobre Aceptar para aplicar los cambios del cuadro de diálogo del editor avanzado de propiedades.
  6. De nuevo, haga clic en Aceptar para salir del cuadro de diálogo Propiedades.

Nvu coloca comillas dobles de forma automática en el texto del atributo.

Validar el HTML

Antes de subir el documento a un servidor web (publicarlo), es una buena práctica comprobar antes el formato del HTML del documento con el objetivo de asegurarse de que cumple con los estándares web. Los documentos que contienen HTML validado son menos propicios a causar problemas en su visualización por los diferentes navegadores. Comprobar únicamente de manera visual la página web en su navegador favorito no significa que su documento vaya a aparecer correctamente al ser abierto en otros navegadores.

Nvu proporciona un modo apropiado para comprobar que el documento cumple los estándares HTML de la W3C (World Wide Web Consortium). Nvu utiliza el Servicio de validación de HTML de la W3C, que comprueba si la sintaxis HTML del documento se ajusta al estándar HTML 4.01. Este servicio proporciona además información sobre cómo corregir los errores.

Nota: hay que estar conectado a Internet para utilizar esta característica.

Para validar la sintaxis del documento HTML:

  1. Abra el menú Herramientas y seleccione Validar HTML. Si no ha guardado los cambios, Nvu le preguntará si hacerlo antes de proceder.
  2. Nvu abrirá una nueva ventana con los resultados de su documento una vez que el servicio de validación de la W3C examine su archivo html.

Escoger el modo de edición correcto

Normalmente no se necesitará cambiar el modo predeterminado de edición (Normal). Sin embargo, si se desea trabajar con el código fuente HTML del documento, quizá se desee cambiar el modo de edición.

Nvu permite saltar rápidamente entre cuatro modos de edición o vistas. Cada modo de edición permite continuar trabajando en el documento, pero muestra niveles variables de etiquetas HTML (e iconos de etiquetas).

Antes de escoger un modo de edición:

La Barra de modo de edición dispone de cuatro pestañas:

Nota: las funciones JavaScript, marcos, enlaces, Java, objetos incrustados y archivos GIF animados no están activos en ninguno de los modos de edición. Para visualizarlos en su estado activo, haga clic en el botón Navegar de la barra de herramientas de redacción para cargar la página dentro de una ventana del navegador.

Utilizar la barra de estado para dar formato a la página web

Nvu dispone de una innovadora característica de aplicación de estilos incrustados y etiquetas class e id al texto seleccionado mediante la barra de estado. Este modo de aplicación de estilo está disponible en todos los modos excepto el modo de edición Código fuente.