El texto es esencial en las páginas web, ya que les dice a tus usuarios de qué trata tu página.
Cuando agregas texto a tu página web, este dictará la dirección y la sensación de tu página web en función de tu idioma. Por ejemplo, por defecto, el inglés se mueve de izquierda a derecha (LTR), mientras que el árabe se mueve de derecha a izquierda (RTL).
Pero la mayoría de las veces, no querrás que todo tu texto permanezca en una sola posición de tu pantalla o contenedor. Necesitarás algunos textos en el centro, algunos a la izquierda y otros a la derecha. Incluso podrías querer que el texto llene el ancho de tu página o contenedor.
Esto es similar a lo que haces cuando editas textos en Microsoft Word o Google Docs, utilizando los botones de alineación izquierda, derecha, centro y justificado. También puedes hacer lo mismo en tus páginas web usando código.
Qué significa alinear campos de texto
En Dreamweaver, un campo de texto puede formar parte de un formulario, de una tabla o de cualquier otro contenedor de la página. Alinear un campo significa controlar su posición horizontal dentro de ese espacio: a la izquierda, a la derecha, en el centro o justificado.
La alineación vertical es diferente. Indica si el campo se coloca en la parte superior, en el centro o en la parte inferior del contenedor. Esta distinción es especialmente importante cuando se trabaja dentro de celdas de una tabla junto con imágenes u otros elementos.
Por defecto, tu página web o el contenido en el contenedor y otros elementos comienzan desde la izquierda.
La forma correcta de controlar la alineación
Recuerda que es esencial manejar todos los estilos mediante CSS. Solo debes usar HTML para agregar el marcado de tu página web.
Con CSS, tienes muchas opciones que puedes usar para alinear tu texto. La propiedad CSS principal que funciona bien con la alineación de texto es la propiedad text-align.
Si deseas alinear todo el texto de tu página web, puedes aplicar esta propiedad a cualquier etiqueta que contenga el texto, como las etiquetas div, heading, paragraph o body.
Una etiqueta HTML puede ser encabezado, párrafo o preformateado.
Las etiquetas HTML proporcionan información sobre la estructura del documento, mientras que el navegador decide qué mostrar al usuario y cómo presentarlo.
Valores de text-align
Antes de ver un ejemplo, exploremos las opciones/valores disponibles para esta propiedad.
- start: Esta se basa en la dirección. Cuando la dirección es de izquierda a derecha, start significaría izquierda. Si la dirección es de derecha a izquierda, entonces start significaría derecha.
- end: Esta también se basa en la dirección. Cuando la dirección es de izquierda a derecha, entonces end significaría derecha.
- left: coloca el texto en el lado izquierdo del contenedor.
- right: coloca el texto en el lado derecho del contenedor.
- center: coloca el texto en el centro del contenedor.
- justify: distribuye el texto para que ocupe el ancho disponible del contenedor.
Cómo alinear el texto a la izquierda
Podrías necesitar cambiar la alineación de tu texto a la izquierda si originalmente estaba en el lado derecho.
La alineación izquierda es la habitual para textos escritos en idiomas que se leen de izquierda a derecha. Puedes aplicarla al párrafo, al encabezado, a una celda de tabla o a otro contenedor que incluya el texto.
En CSS, la regla puede expresarse así:
text-align: left;
Cuando se utiliza una alineación basada en la dirección, también puede emplearse text-align: start;. Esta opción se adapta a la dirección del idioma: a la izquierda en una dirección de izquierda a derecha y a la derecha en una dirección de derecha a izquierda.
Cómo alinear el texto a la derecha
La alineación a la derecha resulta útil para textos que deben situarse junto al borde derecho de un contenedor o para páginas escritas en una dirección de derecha a izquierda.
En CSS, la regla puede expresarse así:
text-align: right;
También puedes utilizar text-align: end; cuando quieras que la alineación se base en la dirección del texto.
Si el contenido se encuentra dentro de una celda, la propiedad debe aplicarse a esa celda o al elemento que contiene el texto, no necesariamente a toda la tabla.
Cómo centrar el texto
El método antiguo con HTML
Antes de la introducción de HTML5, los desarrolladores realizaban estilos específicos con etiquetas HTML. Por ejemplo, podías usar la etiqueta center para alinear tu texto al centro, pero en HTML4, esta etiqueta quedó obsoleta.
Pero ahora que tenemos HTML5, ya no usamos este método.
Solo debes usar HTML para agregar el marcado de tu página web. La presentación debe controlarse mediante CSS.
El método actual con CSS
La propiedad CSS principal que funciona bien con la alineación de texto es la propiedad text-align.
Para centrar un texto, utiliza:
text-align: center;
Esta regla puede aplicarse a cualquier etiqueta que contenga el texto, como las etiquetas div, heading, paragraph o body.
Si aplicas la regla a un contenedor general, todo el contenido textual que dependa de él puede quedar centrado. Por este motivo, cuando solo quieres centrar un elemento concreto, debes seleccionar ese elemento o crear un contenedor específico para él.
Cómo justificar el texto
También podrías querer que el texto llene el ancho de tu página o contenedor.
Para distribuir el texto a ambos lados del contenedor, utiliza:
text-align: justify;
La alineación justificada ajusta el texto al espacio disponible y establece la distribución a ambos lados del texto.
Alinear texto desde el inspector de propiedades
Ahora vamos a modificar las propiedades del texto, bien desde el menú Texto de la barra de menús superior, o bien desde la paleta de propiedades.
Lo más cómodo es hacerlo desde la ventana de propiedades, que se aconseja tener siempre en pantalla porque se utiliza constantemente.
Si en vuestra pantalla no aparece esta ventana, acudid al menú Ventana y seleccionar Propiedades.
La ventana de propiedades es la herramienta que más se utiliza. Es interactiva, de forma que las propiedades que muestre dependerán del elemento que se haya seleccionado.
Dreamweaver permite seleccionar el tipo de alineación desde el panel de propiedades. Sin embargo, es mejor no utilizar los botones para alinear el texto, ya que generan mucho código basura en el código HTML, de modo que es mejor que lo alineemos más adelante con otro método.
Dreamweaver insertará CSS en la página o en la etiqueta según sea necesario.
Crear una regla CSS para los campos de texto
Para crear una regla reutilizable en Dreamweaver, elige Text > CSS Styles > New.
En el cuadro de diálogo New CSS Rule, haz clic para seleccionar la opción Class y escribe .form-text en el campo Name.
Nota: Todos los nombres de estilos de clase deben comenzar con un punto.
Haz clic en OK y, en la categoría Box del cuadro de diálogo CSS Rule Definition, establece Float en Left y Width en 20%.
Haz clic en OK.
Para aplicar el nuevo estilo, selecciona el texto que quieres formatear, como “First Name”, y en el inspector de propiedades haz clic para abrir el menú desplegable Style y elige el nuevo estilo form-text.
Este procedimiento permite aplicar la misma configuración a otros campos sin repetir manualmente todas las propiedades.
Cómo alinear los campos de texto de un formulario
En la mayoría de los formularios de comentarios, querrás incluir campos de texto para recopilar nombres, direcciones y otra información que quieras que el lector escriba en la página.
Para insertar una etiqueta de formulario, haz clic para colocar el cursor donde quieras crear el formulario en la página y elige Insert > Form > Form.
Aparece un cuadro con un contorno rojo que representa la etiqueta del formulario. El cuadro no se mostrará en el navegador, pero todos los elementos del formulario, incluidos los campos de texto, botones de opción, listas desplegables y botones de envío, deben estar contenidos entre las etiquetas de apertura y cierre del formulario.
Insertar campos de texto
El nombre de cualquier elemento de formulario sirve como identificador, por lo que debes utilizar un nombre descriptivo, como “last-name”.
También puedes especificar un ancho de caracteres para controlar la anchura del campo de texto; en este ejemplo se estableció en 50.
Max Chars permite limitar el número de caracteres que puede introducir un usuario, e Init val permite precargar texto, como “Please enter your full name.”
Después de insertar el campo, selecciona el texto que lo identifica y aplica la clase CSS que has creado. Puedes utilizar una clase para alinear las etiquetas de los campos y otra regla para controlar la posición de los propios campos.
Usar listas desplegables
Una lista desplegable ahorra espacio y garantiza respuestas coherentes, por ejemplo, abreviaturas para los estados.
Para añadir una lista desplegable, introduce el texto en la página y elige Insert > Form > List/Menu, o haz clic en el icono List/Menu de la barra Insert del formulario.
Haz clic para seleccionar la lista desplegable en la página y, en el inspector de propiedades, haz clic en el botón List Values.
Introduce una etiqueta y un valor para cada elemento. Utiliza la tecla Tab para pasar de un campo a otro y los iconos Plus y Minus para añadir o eliminar elementos.
También puedes incluir una instrucción, como “Choose a State.”
Usar botones de opción
Los botones de opción son ideales para preguntas de sí o no.
Elige Insert > Form > Radio Button, o haz clic en el icono Radio Button de la barra Insert del formulario.
Selecciona el botón de opción y utiliza el inspector de propiedades para asignarle un nombre. Usa exactamente el mismo nombre para cada botón de un grupo, de modo que el visitante solo pueda seleccionar un botón a la vez.
Introduce un Checked Value, es decir, el valor que quieres asociar al botón cuando esté seleccionado.
También puedes establecer previamente el botón como Checked o Unchecked.
Usar casillas de verificación
Si quieres proporcionar varias opciones y facilitar que el visitante marque todas las que correspondan, las casillas de verificación son la mejor opción.
Para añadir una casilla de verificación al formulario, elige Insert > Form > Checkbox.
Haz clic para seleccionar las casillas una por una y utiliza el inspector de propiedades para asignar un nombre a cada una; después, introduce un Checked Value.
Finalmente, puedes establecer la casilla como marcada o dejarla sin marcar.
Usar un área de texto multilínea
La mayoría de los buenos formularios de comentarios incluyen un campo de texto multilínea para los comentarios.
Para añadir un área de texto, elige Insert > Form > Textarea, o haz clic en el icono Textarea de la barra Insert del formulario.
Haz clic para seleccionar el área de texto y, en el inspector de propiedades, asígnale un nombre, como “comments”, especifica un ancho de caracteres de 50, establece el número de líneas en 4 y asegúrate de que esté seleccionada la opción de radio Multiline.
También puedes añadir un valor inicial, como “Add comments here.”
Cómo evitar que la alineación afecte a todo el contenido
Una situación habitual consiste en escribir un texto alineado a la izquierda y colocar debajo una imagen centrada. Si Dreamweaver centra también el texto superior, normalmente la alineación se ha aplicado a la celda completa o a un contenedor que incluye ambos elementos.
Para evitarlo, no apliques la alineación al contenedor general. Selecciona únicamente el párrafo que debe quedar a la izquierda y aplica:
text-align: left;
Después, selecciona el contenedor de la imagen y aplica:
text-align: center;
Si ambos elementos están dentro de una misma celda y la configuración resulta difícil de controlar, una buena opción es crear, dentro de la tabla, dos celdas juntas, sin espacio entre ellas, de modo que personalices el centrado de cada una como te convenga.
Una celda puede utilizarse para el texto y otra para la imagen, con una alineación independiente en cada caso.
Alinear texto e imágenes dentro de una celda
Para colocar una imagen pegada a la parte derecha y al medio del borde de una celda, y escribir texto a la izquierda de dicha imagen, debes separar el control horizontal del control vertical.
La alineación horizontal del contenido puede controlarse mediante CSS con text-align. La alineación vertical de una celda se controla mediante la propiedad correspondiente de alineación vertical.
En Dreamweaver, la ubicación puede configurarse desde el panel de propiedades, pero al configurar desde allí la ubicación, se centra todo el contenido de la celda.
Una buena opción es crear, dentro de la tabla, dos celdas juntas, sin espacio entre ellas, de modo que personalices el centrado de cada una como te convenga.
De esta forma, una celda puede contener el texto alineado a la izquierda y otra la imagen alineada en el centro. La estructura de la tabla mantiene separados los elementos y evita que una regla aplicada a una celda afecte al contenido de la otra.
Usar tablas para organizar campos y controles
La forma más sencilla de crear dos filas de casillas de verificación es utilizar una tabla, aunque también puedes usar estilos.
Coloca el cursor a la izquierda de la casilla de verificación de Online Albums y elige Insert > Table.
En el cuadro de diálogo Table, especifica 2 Rows, 2 Columns y un Width de 400 píxeles.
Haz clic en OK y corta y pega las cuatro casillas de verificación y sus textos correspondientes en cada una de las celdas.
Para añadir espacio interno, elige Text > CSS Styles > New.
Selecciona la opción Tag y escribe td en el campo Tag.
Haz clic en OK y, en la categoría Box, establece Padding en 10 y activa Same for All.
Haz clic en OK.
Una tabla puede servir para controlar la distribución de elementos, aunque actualmente existen métodos más flexibles y fiables basados en CSS.
Si se utiliza una tabla, es importante recordar que una celda es una unidad independiente de contenido. Las celdas contienen el texto y los demás elementos dentro de ellas, por lo que la alineación aplicada a una celda no debería utilizarse para controlar elementos que pertenecen a otra.
Anchura, espacio y comportamiento de las tablas
La anchura de una tabla puede medirse en píxeles o en porcentajes.
Se recomienda utilizar porcentajes, ya que los tamaños de pantalla varían.
Si una celda contiene más contenido que otra, una celda puede hacerse más larga que la otra y las filas pueden dejar de alinearse como esperabas.
También puedes utilizar padding para que el contenido sea más fácil de leer y tenga una apariencia menos recargada.
La anchura de las celdas también debe planificarse, porque sus proporciones determinan el espacio disponible para los campos de texto, las etiquetas y las imágenes.
Aplicar estilos de texto desde CSS
Los estilos CSS permiten definir la apariencia del texto sin modificar repetidamente cada elemento.
Una clase es una pieza de CSS que puedes reutilizar en muchas partes de la página.
Para crear estilos nuevos en Dreamweaver, utiliza el icono que representa una hoja de papel con un signo más.
Escribe un nombre para el estilo, indica qué hace el estilo y define sus propiedades.
Puedes crear un estilo que cambie el color del texto, aunque también puedes definir propiedades de cursiva, negrita, familia tipográfica, tamaño y alineación.
Los estilos pueden aplicarse a cualquier texto que selecciones.
También puedes crear estilos basados en las etiquetas HTML para controlar cómo se muestran todos los elementos de un tipo determinado.
En la categoría Type, elige Type to Tag.
En Tag, escribe o selecciona h1.
Finalmente, elige una familia tipográfica, un tamaño y un color.
Una etiqueta de bloque en HTML siempre aparece en su propia línea. Entre ellas se incluyen los párrafos y los encabezados.
La fuente puede definirse como Helvetica, sans-serif, o mediante una lista alternativa.
Si la fuente con que se diseñó la página no existe en el ordenador del usuario, el navegador toma la fuente por defecto.
Si se especifica una familia de fuentes, el navegador utilizará la primera disponible y, si no existe, aplicará la siguiente del conjunto.
Las tipografías disponibles en la ventana de propiedades son limitadas.
Las tipografías vienen descritas por las etiquetas HTML y el navegador del usuario las reelabora.
El tamaño puede indicarse en diversas unidades, como píxeles o centímetros.
El texto puede aparecer en negrita o en cursiva.
Cuando se hace un Intro, Dreamweaver deja una línea en blanco. Para evitar esta línea hay que pulsar la combinación de teclas Mayúsculas + Intro.
Crear una hoja de estilos externa
Una hoja de estilo puede utilizarse en muchas páginas.
Los estilos definidos en una hoja de estilo externa se trasladan a todas las páginas de tu sitio web.
Para vincular una hoja de estilos externa, utiliza el panel CSS.
Verás que el panel CSS contiene algunos estilos y podrás utilizar cualquiera de ellos en tu página.
Haz clic en los pequeños triángulos situados junto a sus nombres para ver las reglas disponibles.
Si modificas una regla de la hoja de estilos, los cambios pueden aplicarse a todas las páginas que utilicen esa hoja.
Buenas prácticas para la alineación
- Aplica text-align al elemento concreto que contiene el texto que quieres alinear.
- No apliques una alineación general a una celda si dentro de ella hay elementos que deben tener posiciones diferentes.
- Separa el texto y las imágenes en celdas o contenedores independientes cuando necesiten alineaciones distintas.
- Utiliza CSS para la presentación y HTML para la estructura del documento.
- Comprueba la página en un navegador después de aplicar los cambios.
- Ten en cuenta que distintos navegadores pueden representar los elementos de forma diferente.
- Es mejor utilizar medidas relativas cuando el diseño debe adaptarse a distintos tamaños de pantalla.
- Escribe HTML correcto y utiliza etiquetas que describan la estructura del contenido.
El HTML funciona en los navegadores y en otros dispositivos, incluidos teléfonos y dispositivos que todavía no hemos visto.
Escribir HTML correcto permite que las páginas sean más claras y legibles para los lectores de pantalla y para otros medios de acceso.
La accesibilidad web no depende únicamente de la posición visual del texto. También depende de la estructura del documento y de la forma en que se presenta el contenido cuando cambia el navegador, el dispositivo o la tecnología de asistencia.
Previsualizar el formulario
Ahora que todas las etiquetas del formulario están colocadas, elige File > Preview in Browser y selecciona un navegador para mostrar la página.
Algunas funciones, como la lista desplegable con abreviaturas de estados, solo funcionarán cuando se previsualice la página.
La previsualización permite comprobar si los campos se alinean correctamente, si las etiquetas permanecen junto a sus controles y si la imagen conserva la posición prevista.
Los elementos del formulario pueden parecer desordenados si todos utilizan la fuente predeterminada o si los cuadros de texto se mezclan con el fondo.
Puedes cambiar el color de fondo de toda la página desde Modify > Page Properties.
También puedes cambiar de una vez la fuente de todo el texto desde el campo Page Font.
Elige Arial, Helvetica, sans-serif en el menú desplegable situado junto al campo Page Font y, después, haz clic en el icono Bold.
Haz clic en OK y el nuevo estilo se aplicará automáticamente a todo el texto de la página.
Comprobar el resultado
Prueba la página en el navegador que estés utilizando.
Comprueba que el texto de la etiqueta permanece a la izquierda cuando el campo está alineado junto a él.
Comprueba que los campos que deben ocupar una anchura determinada conservan esa anchura.
Revisa que una imagen centrada no provoque que el texto situado encima también quede centrado.
Si el texto superior cambia de posición, selecciona el párrafo y aplica de forma explícita la alineación izquierda.
Si la imagen no queda centrada, selecciona su contenedor y aplica la alineación central únicamente a ese contenedor.
Si el comportamiento sigue siendo inesperado, divide el contenido en dos celdas juntas o en dos contenedores independientes.
El navegador puede representar los elementos de manera diferente, por lo que conviene probar la página en más de un entorno.
En Dreamweaver, como en Word, existe la opción Buscar y Reemplazar texto en el menú Edición.
El programa considera texto tanto lo que se escribe como el propio código HTML, así como el contenido de las etiquetas Alt, que sirven como descriptor de una imagen.
