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.
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:Para comenzar a partir de un archivo HTML almacenado en su disco local:
Para editar una página web:
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.)
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.
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:
Si no se ha proporcionado aún un título a la página, Nvu
le pedirá que lo haga en la caja de dialogo Page Title (Título de Página).
Entre un título para su página.
Nvu mostrará el título
de la página en la barra de título de la ventana cuando se
muestre la página en el navegador. El título del documento
también aparecerá en la lista de marcadores si se guarda la
página en ella.
A continuación, Nvu le pedirá que introduzca el nombre del archivo y que especifique la ubicación donde desea que se guarde. Asegúrese de que conserva la extensión .html en el nombre del archivo. Cuando almacene o edite documentos usando XHTML, el archivo debe tener la extensión .xhtml. Los archivos con una directiva DOCTYPE de tipo XHTML que tengan extensión .html no serán considerados como documentos xhtml.
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:
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:
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.
Truco: si se introduce el nombre del autor en las preferencias de Nvu, entonces no se tendrá que introducir cada vez que se crea una nueva página.
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
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:
Nota: Las imágenes de fondo se colocan en mosaico y cubren por completo el color de fondo.
El uso de URLs relativas permite mantener todos los archivos enlazados en el mismo sitio relativo al resto independientemente de su ubicación en un disco duro o en un servidor web.
Al desmarcar esta opción Nvu convierte la URL a una URL completa o absoluta. Normalmente se utilizan URLs absolutas cuando se vinculan imágenes en otros servidores web (cuando no están almacenadas localmente en el disco duro).
Si se tienen cambios no guardados, primero se debe guardar la página para habilitar esta opción.
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.
Ejercicio: Dale una mirada al código.
Para aplicar un formato a un párrafo, comience desde la ventana de Nvu:
firmade una página web que indique el autor de la página y una persona con la cual contactar para obtener más información, por ejemplo: usuario@ejemplo.com
Quizá se desee añadir la fecha y un aviso de copyright. Este formato aparece a menudo en el pie de las páginas web bajo una línea horizontal. Nvu mostrará el formato dirección en cursiva.
Para dar formato de titular al texto:
Título 1para el título principal,
Título 2para 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:
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:
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:
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.
Para finalizar una lista y continuar escribiendo texto normal:
Para cambiar uno o más de los elementos de la lista a texto normal:
Para colocar texto sangrado bajo un elemento de una 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:
Para cambiar el estilo, color o tipo de letra del texto seleccionado:
Nota: no aparecen todos los tipos de letra instalados en el ordenador. En vez de especificar un tipo de letra que podría no estar disponible para todos los que vayan a ver la página web, generalmente es mejor seleccionar uno de los tipos de letra proporcionados por el menú ya que éstos funcionan en todos los ordenadores. Por ejemplo, los tipos de letra Helvetica, Arial, Times y Courier por lo general se ven de la misma manera cuando se muestran en cada uno de los distintos ordenadores. Si selecciona un tipo de letra diferente, podría no visualizarse de la misma manera en otro ordenador.
blue). Encontrará un útil conversor de códigos de colores aquí.
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:
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.
Para eliminar todos los estilos de texto (negrita, cursiva y demás) de un texto:
Para seguir escribiendo texto con todos los estilos eliminados:
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.Para buscar texto dentro de la página en la que se está trabajando:
Buscar texto. Para acotar la búsqueda seleccione una o más de las siguientes opciones:
Para buscar y reemplazar texto dentro de la página en la que se está trabajando:
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:
Ejercicio: A continuación inserte una línea horizontal:
Se puede personalizar el alto, largo, ancho, alineación y sombreado de una línea.
% de la ventanao
píxeles. Si especifica la anchura como un porcentaje, la anchura de la línea cambiará siempre que la ventana de Nvu o del navegador sea redimensionada.
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.
Para insertar caracteres especiales como tildes, marcas de copyright o símbolos monetarios:
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.
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:
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:
Nota: Los atributos obligatorios se encuentran resaltados en la lista de atributos.
Nvu coloca comillas dobles de forma automática en el texto del atributo.
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:
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.
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.
Seleccionarse seleccionara el texto completo limitado por la etiqueta de estilo.
Eliminar etiquetase eliminará la etiqueta de estilo, y en consecuencia todos los estilos para esa etiqueta desaparecerán.
Cambiar etiquetael texto de la etiqueta correspondiente se vuelve editable en la barra de estado. Escriba pues la etiqueta deseada y presione
Enter. Las propiedades predeterminadas de la etiqueta se aplicarán al texto dentro de la página web.
Estilos incrustados.
Seleccionando cualquiera de las opciones excepto la última se abrirá la pestaña de la sección correspondiente del editor CSS (más información sobre CSS en la sección Utilizar hojas de estilo). Con la sección correspondiente abierta, se pueden definir estilos propios que serán almacenados según el estilo de código CSS de la W3C.
La opción Extraer y crear estilo genérico permite extraer información de estilo a una regla de estilo y guardarla en una hoja de estilos externa/interna.
Hacer editabley
Borrar área editable, que pueden ser utilizadas al trabajar con plantillas. Para más información sobre plantillas, vea la sección Trabajar con plantillas.