Tutorial: Usar fragmentos de código HTML

En este tutorial se muestra cómo se agrega el marcado a una página utilizando fragmentos de código HTML. Puede usar fragmentos de código HTML en Visual Studio para ahorrar tiempo y reducir la cantidad de datos que tiene que escribir al crear el marcado de la página web en la vista Código fuente.

Nota

Los ejemplos de este tema son específicos de las páginas de formularios Web Forms de ASP.NET.Sin embargo, puede usar fragmentos de código HTML en las páginas que crea para formularios Web Forms, ASP.NET MVC (Model View Controller) y aplicaciones web de ASP.NET Web Pages.

Este tema contiene las siguientes secciones:

• Requisitos previos

• Cómo funcionan los fragmentos de código

• Abrir un proyecto existente o crear un proyecto nuevo

• Insertar fragmentos de código HTML

• Ejecutar la página

• Pasos siguientes

Requisitos previos

Para completar las tareas de este tutorial, necesitará:

• Visual Studio o Visual Studio Express para Web.

Cómo funcionan los fragmentos de código

Visual Studio incluye más de 200 fragmentos de código de C#, Visual Basic, XML y HTML (que incluye marcado de ASP.NET). Los fragmentos de código están compuestos de código de programación preescrito o marcado. En algunos casos, el fragmento de código contiene marcadores de posición para facilitar información (por ejemplo un nombre de propiedad) que puede especificar después de haber insertado el fragmento de código. Puede usar fragmentos de código en el editor de código y, cuando cree una página web, en la vista Código fuente del editor HTML.

En este tutorial agregará marcado HTML y ASP.NET a una página de formularios Web Forms. Casi todos los fragmentos de código tienen un método rápido para insertar código. Por ejemplo, para insertar un control de servidor ASP.NET Button en las páginas de formularios Web Forms, puede escribir <bu y después presione la tecla TAB dos veces. O bien, puede escribir button y después presione la tecla TAB. Al hacerlo, el editor completa el marcado del control Button insertando el siguiente marcado:

<asp:Button Text="text" runat="server" />

Este tutorial le muestra la manera más rápida de insertar fragmentos de código. Sin embargo, también puede insertar fragmentos de código de las siguientes maneras:

• Coloque el cursor donde desee que aparezca el fragmento de código insertado, haga clic con el botón secundario en la página y, a continuación, seleccione Insertar fragmento de código.

• Coloque el cursor donde desee que aparezca el fragmento de código insertado y, a continuación, presione el método abreviado de teclado CTRL+K, CTRL+X. Aparece una lista que permite seleccionar un fragmento de código.

• Seleccione una palabra que desee rodear con un fragmento de código; a continuación, haga clic con el botón secundario en la palabra y haga clic en Envolver con.

• En el menú Edición, seleccione IntelliSense y, a continuación, seleccione Insertar fragmento.

En Visual Studio, para ver qué fragmentos de código están disponibles o para agregar fragmentos de código, puede usar el Administrador de fragmentos de código.

Nota

La característica Administrador de fragmentos de código no está disponible en Visual Studio Express para Web.

En la ilustración siguiente se muestra el cuadro de diálogo Administrador de fragmentos de código.

Administrador de fragmentos de código (Cuadro de diálogo)

En el siguiente procedimiento, verá qué fragmentos de código están disponibles para los elementos HTML.

Para ver los fragmentos de código HTML disponibles con el Administrador de fragmentos de código

1. Abra Visual Studio. No hace falta abrir un proyecto para ver el Administrador de fragmentos de código.

2. En el menú Herramientas, seleccione Administrador de fragmentos de código.

   Se muestra el cuadro de diálogo Administrador de fragmentos de código.

3. En la lista Lenguaje, seleccione HTML.

   Observe que hay varias carpetas que contienen fragmentos de código relacionados con HTML, como ASP.NET, ASP.NET MVC y HTML.

4. En Ubicación, expanda la carpeta HTML.

5. Seleccione div.

   Observe que la lista Accesos directos alternativos incluye elementos HTML relacionados como p, h1 y h2. Los elementos relacionados también tienen fragmentos de código que se pueden insertar mediante los métodos abreviados <div, <p, <h1, etc.

Abrir un proyecto existente o crear un proyecto nuevo

Si aún no tiene ningún proyecto de aplicación de Visual Studio o Visual Studio Express para web, siga estos pasos para crear uno para este tutorial. En el tutorial, trabaja con fragmentos de código en la página Default.aspx, pero puede realizar los mismos pasos en una página de un proyecto existente.

Para crear un proyecto de aplicación web

1. En el menú Archivo, haga clic en Nuevo proyecto.

   Aparecerá el cuadro de diálogo Nuevo proyecto.

2. Seleccione el nodo Web y, a continuación, seleccione Aplicación web ASP.NET en la sección Plantillas instaladas de Visual Studio.

3. En el campo Nombre, escriba SnippetTest.

4. Haga clic en Aceptar.

   Visual Studio crea un proyecto de aplicación web.

Insertar fragmentos de código HTML

IntelliSense muestra qué fragmentos de código HTML están disponibles, igual que muestra otros elementos HTML. Varias características de los fragmentos de código aceleran su inserción y edición. Además, algunos fragmentos de código incluyen marcadores de posición cuyo valor puede especificar sin tener que mover el punto de inserción al atributo.

En este procedimiento, se insertan elementos ASP.NET. Estos se incluyen en la sección HTML del Administrador de fragmentos de código.

Para insertar fragmentos de código HTML en el marcado

1. Abra la página Default.aspx si no está abierta ya.

2. Cambie a la vista Código fuente.

3. Coloque el cursor antes de cerrar la etiqueta </asp:Content>.

4. Escriba <che.

   La lista desplegable muestra los nombres de los elementos y fragmentos de código. Un icono que contiene corchetes angulares indica un elemento HTML, como se muestra en la siguiente ilustración:

   

   Los fragmentos de código se indican con un icono con forma de hoja de papel, tal y como se muestra en la siguiente ilustración:

   

   Algunos fragmentos de código tienen el mismo nombre que su elemento HTML y tienen el icono de fragmento de código y el icono de etiqueta.

5. Presione la tecla TAB dos veces.

   Aparece el marcado de un control CheckBox y se resalta el valor de propiedad text.

   Nota

   Si no coloca el cursor entre las etiquetas de apertura y cierre de un elemento, se pueden obtener resultados diferentes.

6. Escriba Check box y presione ENTRAR para finalizar el elemento.

   El cursor se mueve al final del elemento; no hace falta usar la tecla TAB para finalizar el elemento.

7. Presione ENTRAR para desplazarse a la línea siguiente.

8. Sitúe el cursor al comienzo de la línea y haga clic con el botón secundario en la página.

9. Seleccione Insertar fragmento de código para mostrar las carpetas de fragmentos de código disponibles.

10. Haga doble clic en la carpeta de fragmentos de código HTML.

11. Escriba <br y presione la tecla TAB.

    Aparece el marcado de un elemento (br) de salto de línea.

12. Presione ENTRAR para desplazarse a la línea siguiente.

13. Sitúe el cursor al comienzo de la línea y presione el método abreviado de teclado CTRL+K, CTRL+X.

    La lista de carpetas de fragmentos de código aparece.

14. Presione TAB para elegir la carpeta de fragmentos de código de ASP.NET.

15. Escriba ra y presione la tecla TAB.

    El marcado de un control RadioButton aparece y text aparecerá resaltado.

16. Escriba Radio Button. Presione ENTRAR para finalizar el elemento.

17. Presione ENTRAR para desplazarse a la línea siguiente.

18. Escriba <br y presione la tecla TAB dos veces.

19. Presione ENTRAR para desplazarse a la línea siguiente.

20. En el menú Edición, seleccione IntelliSense y, a continuación, seleccione Insertar fragmento.

    Se abre la lista de carpetas de fragmentos de código.

21. Haga doble clic en la carpeta de fragmentos de código ASP.NET.

22. Escriba la y presione la tecla TAB dos veces.

    Se muestra el marcado de un control Label. El valor de propiedad text está resaltado.

23. Escriba Text box y presione ENTRAR.

24. Vaya a la línea siguiente.

25. Escriba <textb y presione la tecla TAB dos veces.

    El marcado de un control TextBox aparece.

Ejecutar la página

El último paso es comprobar la página. Para probar una página, puede usar IIS Express, que se ejecuta localmente y no necesita IIS.

Para ejecutar la página

1. Presione CTRL+F5 para ejecutar la página.

2. Desplácese hacia abajo hasta la parte inferior. Los controles de casilla, botón de radio, etiqueta y cuadro de texto se encuentran en la parte inferior de la página.

Pasos siguientes

En este tutorial, ha aprendido cómo se pueden agregar fragmentos de código HTML a su proyecto de Visual Studio. Para obtener más información acerca de cómo se trabaja con fragmentos de código, vea los temas de la página Fragmentos de código.