# Edición con Amaya

En esta página se comentan algunos aspectos de la edición de páginas con Amaya:

## Creación de etiquetas HTML

Como editor de páginas web, Amaya permite crear etiquetas HTML. Las etiquetas pueden crearse con el menú Insertar, con los atajos de teclado que se muestran en el menú Insertar o con el panel Elementos de la Ventana de herramientas.

Como es habitual en los procesadores de texto, el punto de inserción actual se muestra mediante un línea azul vertical. El texto que se escriba o la etiqueta que se inserte se coloca en el punto de inserción actual.

La etiqueta <title> se edita mediante el menú Herramientas > Título (title) ....

Volver al principio de la página

## Entidades de carácter en Amaya

Para insertar en Amaya los caracteres que no se encuentran disponibles directamente en el teclado, se puede editar directamente el código fuente o bien utilizar la herramienta Caracteres especiales de la ventana de herramientas (para ver esa herramienta hay que seleccionar el menú Ver > Barras de herramientas > Caracteres especiales). Esta herramienta organiza los caracteres por grupos: letras griegas minúsculas, mayúsculas, símbolos matemáticos, etc. Hay que tener en cuenta que esta herramienta no muestra únicamente las entidades de carácter de html, sino que también muestra muchos caracteres Unicode.

Volver al principio de la página

## Selección de marcas / etiquetas

Para indicar a Amaya que se quiere trabajar con una etiqueta (para convertirla en otra, para definir un atributo, para borrar la etiqueta y su contenido, etc.) es necesario seleccionar la etiqueta. Para seleccionar una etiqueta hay que situar primero el cusor en el elemento que se quiere seleccionar (o hacer clic en él si se trata de una imagen), a continuación se puede hacer clic en el nombre de la etiqueta que se muestra en la barra de estado, o pulsar `F2` hasta seleccionar la etiqueta deseada. Al seleccionar una etiqueta, Amaya resalta el contenido de la etiqueta mostrando el fondo de color azul. Volviendo a hacer clic en algún lugar de la página desaparece la selección de la etiqueta y reaparece el cursor.

Un error muy común es intentar seleccionar una etiqueta arrastrando el ratón. En ese caso no se está seleccionando el elemento, sino el texto. En algunos casos es equivalente (por ejemplo, para convertir un párrafo <p> en una cabecera <h1>), pero en otros no (por ejemplo, al definir un atributo). Para evitar errores, hay que recordar que los elementos se seleccionan con la tecla `F2`. Visualmente, las selecciones se distinguen fácilmente porque cuando se selecciona el elemento con `F2` la selección es de forma rectangular, mientras que cuando se selecciona arrastrando el ratón la forma es irregular.

Cuando se crea una etiqueta de bloque que vaya a contener varios elementos (por ejemplo, una división <div> que vaya a contener varios párrafos <p>), es conveniente seleccionar arrastrando el ratón y después pulsar `F2`.

Volver al principio de la página

## Espacios y párrafos en blanco

Si el código fuente de una página web contiene espacios en blanco o párrafos en blanco, esos espacios no se muestran en el navegador (salvo que se encuentren en una etiqueta <pre> o que se haya utilizado la propiedad CSS white-space).

En el ejemplo siguiente, las palabras se muestran en el navegador con la misma separación entre ellas, cuando en el código fuente hay distinto número de espacios.

| <p>Uno Dos Tres Cuatro.</p> | Uno Dos Tres Cuatro

En el ejemplo siguiente, los párrafos uno, dos y tres se muestran en el navegador con la misma separación entre ellos, cuando en el código fuente hay dos párrafos vacíos entre los párrafos dos tres

| <p>Párrafo uno.</p> <p>Párrafo dos</p> <p></p> <p></p> <p>Párrafo tres</p> | Párrafo uno. Párrafo dos Párrafo tres

Amaya elimina los espacios en blanco innecesarios del código fuente, pero no los párrafos vacíos.

La entidad de carácter &nbsp; que es un espacio en blanco "duro" que los navegadores muestran como espacio aunque haya varios seguidos, se inserta pulsando `Ctrl+espacio`. En el código fuente aparece el carácter tilde (∼) en azul.

En el ejemplo siguiente, las palabras se muestran en el navegador con diferentes separaciones entre ellas.

| <p>Uno ∼ Dos ∼ ∼ ∼ Tres∼ ∼ ∼ ∼ ∼Cuatro.</p> | Uno Dos Tres Cuatro

Volver al principio de la página

## Imágenes de mapas de bits (<img>)

Para insertar una imagen de mapa de bits, hay que situar el cursor en la posición en la que se quiere que aparezca la imagen y pulsar el menú Insertar > Imagen (img)... (o bien utilizar el atajo de teclado Ctrl+h+i, o hacer clic en el botón de Imagen ( ) de la ventana de herramientas "Elementos". Imediatamente se abrirá la ventana de diálogo "Imagen".

En el cuadro de texto "Imagen" se puede escribir directamente el URI (absoluto o relativo) de la imagen.

Si se quiere insertar una imagen que se encuentra en el propio ordenador, se debe pulsar el botón "Buscar" ( ). Inmediatamente se abrirá la caja de diálogo estándar del sistema operativo para seleccionar el archivo. Después de moverse hasta la carpeta donde se encuentra el archivo y hacer doble clic sobre el archivo (o seleccionarlo y pulsar "Abrir"), el camino relativo hasta la imagen se creará automáticamente.

El cuadro de texto "Texto alternativo" permite establecer el atributo alt (obligatorio en el XHTML).

Los iconos "Posición" permiten asignar una alineación determinada a la imagen. Es preferible no utilizar esta opción y utilizar propiedades de la hoja de estilo.

Volver al principio de la página

## Span (<span>)

### Crear una etiqueta <span>

Amaya permite insertar la etiqueta <span> directamente. Para ello, hay que seleccionar el texto con el ratón (no con la tecla `F2`, ya que <span> es una etiqueta en-línea), y elegir el menú Insertar > Elemento carácter > Span.

Otra forma de crear la etiqueta <span> es seleccionar el texto con el ratón y asignar un atributo con la herramienta Atributos o Asignar clase. Al no tener ninguna etiqueta seleccionada y querer asignar un atributo, Amaya genera automáticamente la etiqueta <span> y le asigna el atributo.

Por error se pueden crear etiquetas <span> no deseadas. Eso puede ocurrir al intentar dar una clase a una etiqueta en-línea y no hacerlo correctamente.

Por ejemplo, supongamos que en una página existe una palabra con la etiqueta <strong>. Los pasos correctos serían:

- seleccionar la etiqueta <strong> con la tecla `F2`,
- asignar la clase con la herramienta Atributos o Asignar clase.

Si en vez de seleccionar con la tecla `F2`, se selecciona con el ratón (arrastrando y soltando o haciendo doble clic en una palabra), al asignar la clase, Amaya entiende que se quiere crear una etiqueta <span>. En vez de una etiqueta <strong> con el atributo class, se obtiene una etiqueta <strong> y una etiqueta <span> con el atributo class.

### Borrar una etiqueta <span>

Si a una etiqueta <span> con atributos se le quitan todos los atributos, Amaya la elimina automáticamente.

Para eliminar directamente una etiqueta <span>, hay que:

- seleccionar la etiqueta <span> con la tecla `F2`,
- elegir el menú Herramientas > Transformar... y
- en la ventana Tipo de transformación elegir la opción "Eliminar elemento span".

Volver al principio de la página

## Divisiones (<div>)

### Crear una división

Para crear una división en Amaya, hay que:

- seleccionar con el ratón los elementos que vayan a formar de la división,
- pulsar la tecla `F2`, y
- elegir la opción de menú Insertar > División (div) (o bien utilizar el atajo de teclado Ctrl+h+v o pulsar el botón de División ( ) de la ventana de Herramientas.

### Borrar una división

Para borrar una división en Amaya, hay que:

- seleccionar la división con la tecla `F2`,
- elegir el menú Herramientas > Transformar... y
- en la ventana Tipo de transformación elegir la opción "Eliminar división".

### Asignar atributos a una división

Un error que se suele cometer al asignar un atributo a una división (por ejemplo, al asignar una clase) en Amaya es el siguiente: en vez de situar el cursor en un párrafo incluido en una división y pulsar un par de veces `F2` para seleccionar la división, el usuario selecciona con el ratón todos los párrafos incluidos en la división y pulsa solamente una vez `F2`. Al asignar la clase, en vez de asignarla a la división, la clase se asigna a todos y cada uno de los párrafos seleccionados. Para evitar este error, es conveniente fijarse en la línea de estado, que indica el elemento seleccionado (en el ejemplo anterior, <p> o <div>). Otro detalle en el que poder fijarse es que al seleccionar los párrafos, el espacio intermedio entre párrafos no cambia de color, mientras que al seleccionar la división sí que lo hace.

La imagen siguiente muestra un ejemplo en el que se han seleccionado los párrafos, pero no la división (se reconoce en que el espacio intermedio entre los párrafos no está en azul, y en que la línea de estado muestra la etiqueta <p>). Si se inserta un atributo o se aplica una clase, se hará en los párrafos, pero no en la división.

La imagen siguiente muestra un ejemplo en el que se ha seleccionado la división (se reconoce en que el espacio intermedio entre los párrafos está en azul, y en que la línea de estado muestra la etiqueta <div>). Si se inserta un atributo o se aplica una clase, se hará en la división.

Volver al principio de la página

## Formularios

Para crear un nuevo formulario en Amaya, se puede utilizar el menú Insertar > Formulario > Insertar formulario (form). Al crear el formulario, Amaya solicita el valor del atributo action.

Amaya no permite crear un elemento <fieldset> alrededor de varios elementos seleccionando los elementos y creando el <fieldset> (como sí permite con las divisiones <div>). Hay que crear el <fieldset> antes o después de los elementos y después mover los elementos dentro del <fieldset>.

Cuando se crea un menú <select>, Amaya crea un único elemento <option>, pero después no permite crear nuevos elementos <option> en la vista formateada. Se recomienda abrir la vista de código fuente para crearlos.

Volver al principio de la página

## Otros

Si estás en una etiqueta <pre> y pulsas `Return`, se crea un salto de párrafo, pero sigues dentro de la etiqueta <pre>. Para salir del bloque preformateado <pre>, pulsa `F2` para seleccionar el bloque preformateado completo y pulsa `Ctrl+K`.

Crear accronym

Volver al principio de la página