Tutorial: Edición básica de HTML en Visual Studio para páginas de formularios Web Forms

Microsoft Visual Studio 2012 proporciona una experiencia de edición HTML enriquecida para páginas de formularios Web Forms. El editor HTML de Visual Studio permite trabajar en modo WYSIWYG y también permite trabajar directamente con el formato HTML para un control más preciso. Este tutorial presenta las características de edición de HTML de Visual Studio.

Las tareas que se ilustran en este tutorial son las siguientes:

• Crear y editar HTML en la Vista de diseño.

• Crear y editar HTML en la vista Código fuente.

• Usar la vista En dos paneles.

• Usar herramientas de navegación para moverse rápidamente entre las etiquetas HTML.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

• Visual Studio o Visual Studio Express para Web instalado en el equipo. 

  Nota

  Si usa Visual Studio, en este tutorial se presupone que seleccionó la colección de configuraciones Desarrollo web la primera vez que inició Visual Studio.Para obtener más información, vea Cómo: Seleccionar configuraciones de entorno de desarrollo web.

• Conocimientos generales de cómo trabajar con Visual Studio.

  Para obtener una introducción sobre cómo crear páginas de formularios Web Forms en Visual Studio, vea Tutorial: Crear una página web de formularios Web Forms básica en Visual Studio.

Crear el sitio web y la página de formularios Web Forms

Si ya ha creado un sitio de formularios Web Forms en Visual Studio o en Visual Studio Express para Web (por ejemplo, completando los pasos descritos en Tutorial: Crear una página web de formularios Web Forms básica en Visual Studio), puede usar ese sitio web y pasar a la sección siguiente. De lo contrario, cree un sitio web y una página de formularios Web Forms siguiendo estos pasos.

Para crear un sitio web del sistema de archivos

1. Abra Visual Studio o Visual Studio Express para Web.

2. En el menú Archivo, haga clic en Nuevo sitio Web.

   Aparece el cuadro de diálogo Nuevo sitio web.

3. En Instalado, haga clic en Visual Basic o Visual C# y, a continuación, seleccione Sitio web vacío de ASP.NET.

   En este tutorial, crea un sitio web que no incluye páginas ni otros recursos precompilados.

4. En el cuadro Ubicación web, seleccione Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas del sitio web.

   Por ejemplo, escriba el nombre de carpeta C:\WebSites.

5. Haga clic en Aceptar.

   Visual Studio crea un proyecto de sitio web que incluye un archivo Web.config.

6. En el Explorador de soluciones, haga clic con el botón secundario en la raíz del sitio web y, a continuación, seleccione Agregar nuevo elemento.

7. Seleccione Web Forms, asigne el nombre "Default.aspx" al archivo y, a continuación, haga clic en Agregar.

Trabajar en la vista Diseño

En esta parte del tutorial, aprenderá a trabajar en la Vista de diseño, la cual muestra una vista de la página de formularios Web Forms tipo WYSIWYG. Puede agregar texto escribiéndolo como lo haría en un programa de procesamiento de texto. Puede dar formato al texto directamente con comandos de formato o creando estilos en línea.

La Vista de diseño muestra la página de forma similar a cómo aparecerá en un explorador, con algunas diferencias. La primera diferencia es que en la Vista de diseño, el texto y los elementos son modificables. La segunda diferencia es que para ayudar a editar las páginas, la Vista de diseño muestra algunos elementos y controles que no aparecerán en el explorador. Además, algunos elementos, como las tablas HTML, tienen una representación especial de la Vista de diseño que agrega espacio adicional para el editor. En general, la Vista de diseño ayuda a visualizar la página, pero no es una representación exacta de cómo se verá en un explorador.

Para agregar y dar formato estático a HTML en la vista Diseño

1. Si no está en la Vista de diseño, haga clic en Diseño, que se encuentra en la parte inferior izquierda de la ventana.

   

2. En la parte superior de la página, escriba Página web ASP.NET.

   

3. Resalte el texto para seleccionarlo y, a continuación, en la barra de herramientas Formato, haga clic en Título 1.

   

4. Presione ENTRAR después de Página web ASP.NETy, a continuación, escriba Esta página funciona con ASP.NET.

   

5. Resalte el texto y, a continuación, en el menú Formato, haga clic en Nuevo estilo.

   

   Aparecerá el cuadro de diálogo Nuevo estilo.

6. Seleccione la opción Aplicar nuevo estilo a la selección del documento.

7. Seleccione una fuente en la lista desplegable Familia de fuentes y, a continuación, haga clic en Aplicar.

   La familia de fuentes se aplica al texto seleccionado.

   

8. En Categoría, haga clic en Bloque y, a continuación, seleccione (valor) en la lista desplegable Alto de línea. Especifique un valor para el alto de línea.

   

9. Seleccione (valor) en la lista desplegable espaciado entre letras. Especifique un valor para el espaciado entre las letras. Haga clic en Aplicar para ver los valores aplicados al texto seleccionado.

10. Haga clic en Aceptar.

Visualizar información de etiqueta

Cuando se trabaja en la vista Diseño, quizá desee ver etiquetas como div y span que no tienen una presentación visual.

Para ver las etiquetas de superficie de diseño de HTML en la vista Diseño

• En el menú Ver, señale a Ayudas visuales y asegúrese de que Controles no visuales de ASP.NET está seleccionado.

  El diseñador muestra los símbolos para párrafos, saltos de línea y otras etiquetas que no representan texto. Los símbolos no se muestran todos a la vez, pero al hacer clic en un elemento visual, se muestra el elemento no visual que lo precede.

Agregar controles y elementos

En la Vista de diseño, puede arrastrar controles desde el cuadro de herramientas a la página. Puede agregar algunos elementos, como tablas HTML, mediante el cuadro de diálogo. En esta sección, agrega algunos controles y una tabla de modo que tenga elementos con los que trabajar en el tutorial.

Para agregar controles y una tabla

1. Coloque el cursor a la derecha del texto Esta página funciona con ASP.NET y, a continuación, presione ENTRAR.

2. En el grupo Estándar del Cuadro de herramientas, arrastre un control TextBox a la página y colóquelo en el espacio creado en el paso anterior.

   Nota

   También puede agregar un control haciendo doble clic sobre él.

   

3. Arrastre un control Button a la página y colóquelo a la derecha del control TextBox agregado en el paso anterior.

   Los controles TextBox y Button son controles de servidor web ASP.NET, no elementos HTML.

   

4. Coloque el cursor a la derecha del control Button y, a continuación, presione ENTRAR.

5. En el menú Tabla, haga clic en Insertar tabla.

   Se abrirá el cuadro de diálogo Insertar tabla.

   

6. Haga clic en Aceptar.

   El cuadro de diálogo Insertar tabla proporciona opciones para configurar la tabla que está creando. Sin embargo, para este tutorial, puede utilizar un diseño de tabla predeterminado.

   

Crear hipervínculos

La Vista de diseño proporciona generadores y otras herramientas para ayudar a crear elementos HTML que requieren configuraciones de propiedad.

Para crear un hipervínculo

1. En el texto Esta página funciona con ASP.NET, resalte ASP.NET para seleccionarlo.

2. En el menú Formato, haga clic en Convertir en hipervínculo.

   

   Aparecerá el cuadro de diálogo Hipervínculo.

3. En el cuadro Dirección URL, escriba https://www.asp.net.

   

4. Haga clic en Aceptar.

Configurar propiedades en la ventana Propiedades

Puede cambiar el aspecto y comportamiento de los elementos de la página configurando los valores en la ventana Propiedades.

Para establecer las propiedades usando la ventana Propiedades

1. Seleccione el control Button que agregó en "Agregar controles y elementos" anteriormente en este tutorial.

2. En la ventana Propiedades, establezca Text en Haga clic aquí y ForeColor en un color diferente.

   

3. Sitúe el cursor en el hipervínculo ASP.NET que creó en la sección anterior.

   Tenga en cuenta que en la ventana Propiedades, la propiedad hreef para el elemento a está establecida en la dirección URL que facilitó para el hipervínculo.

Probar la página

Puede ver los resultados de su edición abriendo la página en el explorador.

Para iniciar la página en el explorador externamente

• Haga clic en la página con el botón secundario del mouse y, a continuación, haga clic en Ver en el explorador.

  Si se le pide que guarde los cambios, haga clic en Sí.

  Visual Studio inicia IIS Express, que es un servidor web local que puede usar para probar páginas sin usar un servidor completo de IIS.

  Nota

  Puede ejecutar páginas de varias maneras.Si presiona CTRL+F5, Visual Studio realiza la acción de inicio configurada en la página de propiedades para Opciones de inicio.La opción de inicio predeterminada para CTRL+F5 es ejecutar la página actual; es decir, la página que se encuentra activa en la vista Código fuente o en la Vista de diseño.Asimismo, puede ejecutar páginas en el depurador.Para obtener más información, vea Tutorial: Depurar páginas Web en Visual Web Developer.

Cambiar la vista predeterminada

De forma predeterminada, Visual Studio abre las páginas nuevas en la vista Código fuente.

Para cambiar la vista de la página predeterminada a la vista Diseño

1. En el menú Herramientas, haga clic en Opciones

2. Asegúrese de que las opciones de Mostrar todas las configuraciones están seleccionados al final del cuadro de diálogo.

3. Abra el nodo Diseñador de HTML y seleccione General. En Iniciar páginas en, haga clic en la Vista de diseño.

   

Trabajar en la vista Código fuente

La vista Código fuente permite editar el marcado de la página directamente. El editor de la vista Código fuente ofrece muchas características que le ayudan durante la creación de los controles de HTML y ASP.NET. Puede utilizar el cuadro de herramientas en la vista Código fuente igual que lo hace en la Vista de diseño para agregar nuevos elementos a la página.

Para agregar elementos en la vista Código fuente

1. Cambie a la vista Código fuente haciendo clic en Código fuente, que está situado en la parte inferior de la ventana.

   Los controles que ha agregado se crean como elementos <asp:>. Por ejemplo, el control Button es el elemento <asp:button>. Los valores de propiedad seleccionados se conservan como valores de atributo en la etiqueta de apertura <asp:button>.

2. Desde el grupo HTML del Cuadro de herramientas (no el grupo Estándar), arrastre un elemento Table a la página y sitúelo justo encima de la etiqueta </form>.

El editor también le ayuda cuando escribe el marcado de forma manual. Por ejemplo, el editor proporciona opciones sensibles al contexto para terminar las etiquetas y atributos HTML cuando los está escribiendo. El editor también proporciona información sobre errores y advertencias sobre el marcado al subrayar el marcado dudoso con una línea ondulante. Puede ver información de error o advertencia situando el mouse sobre el texto de marcado.

Para editar HTML en la vista Código fuente

1. Sitúe el cursor encima de la etiqueta de cierre </form> y después escriba un corchete angular izquierdo (<).

   Observe que el editor le ofrece una lista de etiquetas correspondientes al contexto actual.

   

2. Escriba "a" para crear una etiqueta delimitadora y, a continuación, presione la BARRA ESPACIADORA.

   El editor muestra una lista de atributos que son adecuado para la etiqueta delimitadora.

   Nota

   La letra a (elemento delimitador) puede no aparecer como una opción, dependiendo del destino de validación que está establecido para el sitio o la página.Sin embargo, todavía puede crear un elemento delimitador escribiendo "a" sin seleccionar un elemento en la lista desplegable.Los destinos de validación se describen posteriormente en este tema.

   

3. En la lista, haga clic en href y, a continuación, escriba un signo igual (=) y unas comillas dobles (").

   El editor ofrece una lista de páginas actualmente disponibles a las que se puede vincular.

   

4. En la lista de archivos, haga doble clic en Default.aspx, presione la BARRA ESPACIADORA y después escriba un corchete angular derecho (>) para cerrar la etiqueta.

   El editor inserta una etiqueta de cierre </a>.

5. Finalice el elemento delimitador escribiendo el texto Home entre las etiquetas de cierre y apertura.

   Ahora, el elemento es similar al del ejemplo siguiente:

   <a href="Default.aspx">Home</a>
   

6. Sitúe el cursor justo encima de la etiqueta </form> de cierre y, a continuación, escriba <invalid>.

   El editor subraya la etiqueta con una línea ondulante, indicando que la etiqueta no es una etiqueta HTML reconocida.

7. Quite la etiqueta que creó en el paso anterior.

Examinar el formato HTML

Una característica importante del diseñador de páginas es que conserva el formato HTML que aplica a la página. Sin embargo, puede especificar explícitamente que el editor cambie el formato del documento.

Para examinar el formato HTML

1. Dé un nuevo formato a los atributos para el control Button alineando los atributos para que la sintaxis declarativa se parezca a lo siguiente:

   <asp:Button
       id="Button1"
       runat="server"
       Font-Bold="True"
       ForeColor="Blue"
       Text="Click Here" />
   

   Observe que después de aplicar una sangría en el primer atributo, si presiona ENTRAR en la etiqueta, las siguientes líneas adoptan la misma sangría.

2. Cambie a la vista Diseño.

3. Haga clic con el botón secundario del mouse en el control Button y, a continuación, haga clic en Copiar.

4. Sitúe el cursor debajo del control Button, haga clic con el botón secundario del mouse y después haga clic en Pegar.

   Visual Studio crea un botón con la propiedad ID establecida en Button2.

5. Desde el grupo Estándar del Toolbox, arrastre un tercer control Button a la página, con lo que se crea un botón denominado Button3.

6. Cambie a la vista Código fuente.

   Observe que Button2 está formateado de idéntica manera a como formateó Button1. Por otro lado, Button3 está formateado utilizando el formato predeterminado para los controles Button.

   Nota

   Para obtener más información sobre cómo personalizar el formato de elementos individuales, vea Tutorial: Edición avanzada de HTML en Visual Studio para páginas de formularios Web Forms.

7. Edite el documento de modo que Button1 y Button2 estén en la misma línea sin que haya un espacio entre ellos, tal y como se muestran en el ejemplo siguiente:

   <asp:Button ID="Button1" runat="server" Font-Bold="True" 
   ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
   runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
   

   Los elementos pueden ajustarse, pero el principio de Button2 debe seguir inmediatamente al final de Button1 (el carácter />).

8. Cambie a la vista Diseño.

   Observe que Button1 y Button2 están justo el uno al lado del otro sin ningún espacio entre ellos.

9. Cambie a la vista Código fuente.

10. En el menú Edición, en el submenú Avanzada, haga clic en Dar formato al documento.

    El documento cambia de formato, pero Button1 y Button2 permanecen en la misma línea. Si el editor separó los botones, insertaría un espacio durante la presentación. Por lo tanto, el editor no cambia el formato que ha creado.

Trabajar en la vista en dos paneles

Puede ver las ventanas de la Vista de diseño y de la vista Código fuente al mismo tiempo utilizando la vista En dos paneles.

Para ver una página en la vista en dos paneles

• Cambie a la Vista en dos paneles haciendo clic en Vista en dos paneles, que está situada en la parte inferior izquierda de la ventana. Observe que la ventana de la vista Código fuente ocupa la mitad superior de la pantalla y la ventana de la vista Diseño la mitad inferior. Observe también que las dos vistas están sincronizadas. Si hace doble clic en un elemento en una vista para seleccionarlo, el elemento correspondiente de la otra vista aparecerá resaltado.

Navegar entre elementos

Conforme las páginas se hacen más grandes y complejas, es útil poder encontrar etiquetas rápidamente y reducir la aglomeración en la página. Visual Studio proporciona las siguientes herramientas para ayudarle con estas tareas cuando está trabajando en la vista Código fuente:

• Esquema del documento, que proporciona una vista completa del documento.

• El navegador de etiquetas, que proporciona información sobre la etiqueta seleccionada en este momento y dónde se encuentra en la jerarquía de página.

Para comenzar, agregue más elementos a la página para que pueda examinar las características de navegación.

Para agregar elementos

1. Cambie a la vista Diseño.

2. Desde el grupo HTML del Cuadro de herramientas, arrastre un control Table a una celda de la tabla que creó en "Trabajar en la vista Código fuente," anteriormente en este tutorial.

3. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control Button a la celda del centro de la tabla anidada.

Con varios elementos anidados en la página, puede ver cómo Esquema del documento proporciona una navegación rápida a cualquier etiqueta de la página.

Para navegar con Esquema del documento

1. Cambie a la vista Código fuente.

2. En el menú Ver, haga clic en Esquema del documento.

3. En Esquema del documento, haga clic en Button4.

   En el editor, queda seleccionado el control <Button4> que agregó en el procedimiento anterior.

   

El explorador de etiquetas proporciona información sobre la etiqueta seleccionada en este momento y dónde se encuentra en la jerarquía de página.

Para navegar con el explorador de etiquetas

1. Sitúe el cursor en el elemento Button.

   Fíjese en el explorador de etiquetas en la parte inferior de la ventana que muestra la etiqueta <asp:button> y sus etiquetas primarias. El explorador de etiquetas incluye el identificador de elementos, si los hubiera, para que pueda identificar cuál es el elemento que se está mostrando. El explorador de etiquetas también muestra la hoja de estilos en cascada asignada, si la hubiera, que se estableció con el atributo Class.

   

2. En el explorador de etiquetas, haga clic en la etiqueta <table> que esté más cerca de la etiqueta <asp:button#Button4>.

   El explorador de etiquetas se desplaza al elemento interno <table> y lo selecciona.

   

3. En el explorador de etiquetas, haga clic en la etiqueta <td> situada a la izquierda de la etiqueta <table> seleccionada.

   Se selecciona toda la celda que contiene la tabla anidada.

   Nota

   Puede hacer clic para seleccionar la etiqueta o su contenido utilizando la lista desplegable del explorador de etiquetas.De forma predeterminada, al hacer clic en una etiqueta del explorador de etiquetas se selecciona la etiqueta y su contenido.

También puede usar el navegador de etiquetas para que le ayude a mover o copiar elementos.

Para mover o copiar elementos mediante el navegador de etiquetas

1. Usando el navegador de etiquetas, seleccione la etiqueta <tr> que contiene el control Button4.

2. Presiones CTRL+C para copiar la etiqueta.

3. Utilice el explorador de etiquetas para desplazarse a la tabla externa.

4. En la vista Código fuente, coloque el cursor entre la etiqueta <table> y la primera etiqueta <tr>.

5. Presione CTRL+V para copiar la fila en la tabla.

6. Cambie a la vista Diseño.

   Observe que la nueva fila se ha agregado, incluyendo un control Button.

Formato de texto

• La barra de herramientas Formato aplica estilos en línea en la mayoría de las configuraciones. El formato de negrita y cursiva se aplica utilizando las etiquetas b y i. Para el formato de párrafo se aplica una etiqueta de bloque, como por ejemplo, p (para normal), pre (para formateado), etc. La alineación de párrafos se realiza utilizando los estilos en línea para adaptarse a los estándares XHTML 1.1.

• El diseñador también le permite crea un bloque style y un vínculo a una hoja de estilos en cascada. Para obtener más información, vea Tutorial: Crear y modificar un archivo CSS.

• De forma predeterminada, el editor crea marcado que es compatible con el estándar XHTML5. El editor convierte todos los nombres de etiquetas HTML a minúsculas, aunque los escriba en mayúsculas. El editor también encierra valores de atributo (propiedad) entre comillas dobles. Para obtener más información, vea Tutorial: Edición avanzada de HTML en Visual Studio para páginas de formularios Web Forms.

Para cambiar la validación de marcado predeterminado

1. En la vista Código fuente, haga clic con el botón secundario del mouse en la página y, a continuación, haga clic en Formato y validación.

2. En el cuadro de diálogo Opciones, expanda Editor de texto, expanda HTML y, a continuación, haga clic en Validación.

3. En la lista Destino, escriba un tipo de validación.

Pasos siguientes

Este tutorial ha ofrecido información general sobre las funciones HTML del editor de páginas web. Esto incluye cómo crear HTML en la Vista de diseño y la vista Código fuente, formato básico y navegación. Para obtener más información sobre las funciones de edición de Visual Studio, vea los siguientes recursos.

• Para obtener más información sobre las funciones adicionales del editor HTML, incluyendo las opciones de formato personalizadas, esquematización y validación HTML, vea Tutorial: Edición avanzada de HTML en Visual Studio para páginas de formularios Web Forms.

• Para obtener más información sobre cómo trabajar con estilos en hojas de estilos en cascada, vea Tutorial: Crear y modificar un archivo CSS.

Vea también

Tareas

Tutorial: Edición avanzada de HTML en Visual Studio para páginas de formularios Web Forms

Conceptos

Vista de diseño