Edición con
AmayaEdición con
AmayaEn esta página se comentan algunos aspectos de la edición de páginas con Amaya:
Como editor de páginas web, Amaya permite crear etiquetas HTML. Las etiquetas pueden crearse con el menú , con los atajos de teclado que se muestran en el menú 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ú .
Volver al principio de la página
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ú ). 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
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
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 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
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ú (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
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ú .
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:
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.
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:
Volver al principio de la página
Para crear una división en Amaya, hay que:
) de la ventana de
Herramientas.Para borrar una división en Amaya, hay que:
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
Para crear un nuevo formulario en Amaya, se puede utilizar el menú . 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
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
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.