3.1 Utilizar lenguajes de marcas en vez de imágenes para transmitir la información

Prioridad 2

En el ejemplo del botón creado con texto con estilo en cascada, podrá seguir el siguiente procedimiento:

1. En la vista Página, en la ficha Normal, escriba el texto que irá en el botón que creará. Siguiendo con el ejemplo, sería Botón de ejemplo.
2. Seleccione ("pinte") el texto escrito y haga clic en Formato y Bordes y sombrado...
3. En la ficha Bordes, ubique la sección Configuración y haga clic en Cuadro .
4. En Color, haga clic en el menú descolgable y seleccione el color que desea para el borde del botón (siguiendo con nuestro ejemplo, seleccione el color azul).
5. En Ancho determine un valor de 3 para indicar el ancho del borde del botón.
6. En la sección Margen interior, indique un valor de 2 para las cuatro opciones que figuran (Superior, Inferior, Izquierdo y Derecho).
7. Ahora, en la ficha Sombreado, en la sección Relleno, en Color de fondo, haga clic en el menú descolgable y seleccione el color que desea para el fondo del botón (siguiendo con nuestro ejemplo, seleccione en Más colores... el color azul claro que figura en el mismo).
8. En Color de primer plano, haga clic en el menú descolgable y seleccione el color que desea para el texto del botón (siguiendo con nuestro ejemplo, seleccione el blanco).
9. Haga clic en Aceptar .
10. Para centrar el texto en el botón, vuelva a seleccionar ("pintar") el texto, haga clic con el botón secundario del ratón sobre el mismo y seleccione Párrafo....
11. O seleccione el texto con el botón primario y haga clic en Formato y Párrafo... .
12. En Alineación seleccioneCentro .
13. Haga clic en Aceptar .

Por último, se deberá seguir este procedimiento:

1. Seleccione el texto con el botón primario del ratón.
2. Desde la Vista Página, haga clic en la ficha HTML .
3. Habiendo seleccionado previamente el texto, aparecerá de un color resaltado la línea del código HTML donde se encuentra, por ejemplo:

   <p style="background-color: #6666FF; color: #FFFFFF; border: 3 solid #0000FF;
   padding: 2" align="center">Botón de ejemplo</p>

4. Cambie el elemento p por el elemento div como se muestra a continuación.

   <div style="background-color: #6666FF; color: #FFFFFF; border: 3 solid #0000FF;
   padding: 2" align="center">Botón de ejemplo</div>

5. Por último, agregue el atributo widht dentro de la etiqueta <div> como se muestra a continuación.

   <div style="width: 200px; background-color: #6666FF; color: #FFFFFF;
   border: 3 solid #0000FF; padding: 2" align="center">Botón de ejemplo</div>

Volver a ejemplos del punto 3.1