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

Artículo
11/15/2012

Microsoft Visual Studio proporciona una completa experiencia de edición HTML para crear páginas web. En este tutorial se presentan algunas de las características más avanzadas de edición HTML de Visual Studio. Para obtener una introducción a la edición HTML, vea Tutorial: Edición básica de HTML en Visual Studio para páginas de formularios Web Forms.

Nota

Los ejemplos de este tema son específicos de las páginas de formularios Web Forms de ASP.NET.Sin embargo, puede usar las opciones de formato HTML para el marcado en páginas de formularios Web Forms, vistas de ASP.NET MVC (Model View Controller), páginas ASP.NET Web Pages y páginas HTML.

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

Especificar las opciones para que el editor HTML muestre el marcado en la vista Código fuente.
Seleccionar las opciones para que el editor HTML creado sea compatible con el esquema concreto (estándares de marcado) como HTML5.
Esquematizar la página; es decir, crear regiones plegables en el editor para reducir el desorden.

Requisitos previos

Para completar las tareas de este tutorial, necesitará:

Conocimientos básicos de cómo trabajar con Visual Studio.

Para obtener una introducción a Visual Studio, vea Tutorial: Edición básica de HTML en Visual Studio para páginas de formularios Web Forms.

Crear el sitio y la página web

Si ya ha creado un proyecto de formularios Web Forms en Visual Studio (por ejemplo, completando los pasos descritos en Tutorial: Edición básica de HTML en Visual Studio para páginas de formularios Web Forms), vaya a la sección siguiente. De lo contrario, cree un proyecto y una página web siguiendo estos pasos.

Para crear un proyecto de sitio web del sistema de archivos

Abra Visual Studio.
En el menú Archivo, elija Nuevo sitio Web.

Se abrirá el cuadro de diálogo Nuevo sitio web.

Nota

En este tutorial se usa un proyecto de sitio web.No obstante, puede usar un proyecto de aplicación web si así lo desea.Para obtener información acerca de la diferencia entre estos tipos de proyecto web, vea Proyectos de aplicación web frente a proyectos de sitio web.
En Instalado, seleccione el lenguaje de programación con el que prefiera trabajar.
En el panel Plantillas, elija Sitio de formularios Web Forms ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta donde desea conservar las páginas del sitio web.

Por ejemplo, escriba el nombre de carpeta C:\WebSites.
Elija Aceptar.
En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, elija Agregar nuevo elemento.
En Instalado, elija el lenguaje con el que desea trabajar.
En el panel Plantillas, elija Formulario Web Forms.
Elija Agregar.

Dar formato al marcado

El editor HTML proporciona diversas opciones que ayudan a dar formato al marcado de las páginas según las preferencias del usuario. Las opciones de formato son, entre otras:

Si los nombres de las etiquetas y los atributos aparecen en mayúsculas o minúsculas. Puede especificar por separado las opciones de las etiquetas HTML y los controles de servidor web de ASP.NET.
Si los atributos se agregan escribiéndolos entre comillas.
Si el editor cierra automáticamente los elementos. Las opciones incluyen la creación de etiquetas de autocierre (por ejemplo, <br />), la creación de etiquetas de apertura y de cierre (<p></p>) y la inserción automática de etiquetas de cierre.
Cómo se aplica sangría los elementos secundarios de una etiqueta.
Dónde se insertan los saltos de línea en relación con las etiquetas.

Con independencia de las opciones de formato establecidas, tiene el control sobre el diseño y la apariencia del marcado en el editor. Puede dar formato a los elementos manualmente (por ejemplo, aplicándoles sangría). El editor deja el formato como está a menos que haga una solicitud explícitamente para cambiar el formato del marcado.

En esta sección del tutorial, cambiará algunos valores que afectan a cómo el marcado se muestra en el editor y cómo ver el efecto de estos cambios. También aprenderá a aplicar formato a una página entera o a una selección dentro de la página.

Para agregar elementos HTML con opciones de formato predeterminadas

Cambie a la vista Diseño.
En el menú Tabla, elija Insertar tabla. No cambie ninguno de los ajustes predeterminados del cuadro de diálogo.
Elija Aceptar.

El diseñador crea una tabla HTML con dos columnas y dos filas.
Debajo de la tabla, haga clic en la página.
Presione ENTRAR varias veces para crear espacio en blanco y, a continuación, desde el grupo HTML del Cuadro de herramientas, arrastre un control Image hasta la página.
Cambie a la vista Código fuente.

Verá que los elementos <table> e <img> se han insertado en la página. Se resalta el elemento <img>.

De forma predeterminada, el diseñador crea elementos en los que los nombres de las etiquetas y los atributos están en minúsculas y los atributos aparecen entre comillas.

Ahora puede cambiar las opciones de formato.

Para cambiar las opciones de formato y validación

En el menú Herramientas, elija Opciones.
Elija Editor de texto, expanda HTML y, a continuación, elija Validación.
En la lista Destino, elija HTML5.

Nota

En lugar de elegir manualmente un esquema predeterminado para las nuevas páginas con el que se va a validar, puede elegir Usar doctype para validar la detección del esquema.Esta opción indicaría a Visual Studio que usara la declaración DOCTYPE de la página para determinar el esquema que se va a usar para la validación.En este tutorial, no active esta casilla para que pueda ver cómo la opción de esquema de destino afecta al funcionamiento del editor.
Elija Formato.

Los cuadros desplegables Etiqueta del cliente y Atributos del cliente están habilitados porque seleccionó HTML5 en el paso anterior. Si hubiera mantenido el valor XHTML5 para Destino, estos dos cuadros desplegables estarían en letras minúsculas y estarían deshabilitados porque XHTML5 necesita minúsculas.

Nota

Puede establecer de manera independiente algunas opciones para determinadas etiquetas del servidor (controles de servidor ASP.NET) y etiquetas del cliente (elementos HTML) eligiendo Opciones específicas de etiqueta.Más adelante en este tutorial, se usará esta característica.
Establezca la opción Etiqueta del cliente en Mayúsculas.
Desactive las casillas Insertar comillas de valores de atributos al escribir e Insertar comillas de valores de atributos al aplicar formato.
Elija Aceptar para volver al editor.

Observe que, aunque ha modificado las opciones de formato, el marcado existente en la página no cambia.

Ahora puede agregar nuevos elementos.

Para agregar elementos HTML con las nuevas opciones de formato

En la vista Código fuente, desplácese a la parte inferior de la página.
Desde el grupo HTML del Cuadro de herramientas, arrastre un control Table hasta la página y colóquelo sobre la etiqueta </form>.

Esta vez, las etiquetas del elemento <TABLE> aparecen en letras mayúsculas.
Debajo de la tabla que acaba de crear, coloque el punto de inserción y, a continuación, escriba un corchete angular de apertura (<) para iniciar una nueva etiqueta.

Aparece una lista en la que todos los nombres de etiqueta se ofrecen en mayúsculas, porque ahora es el valor predeterminado.
Escriba img en minúsculas.

IMG aparece en la lista en mayúsculas, reflejando la nueva grafía predeterminada para las etiquetas.
Presione la BARRA ESPACIADORA.

<IMG se escribe en la página en mayúsculas y aparece una lista de atributos de la etiqueta. Los atributos están en minúsculas porque, al establecer las opciones de formato, dejó Minúsculas como valor predeterminado de Atributos del cliente.
Escriba src=.

Normalmente, el editor proporciona un conjunto de comillas dobles después del signo igual. Sin embargo, como ha deshabilitado la opción Insertar comillas de valores de atributos al escribir, el editor no las proporciona.

Nota

Si escribe un valor de atributo en la ventana Propiedades que contiene un espacio, el editor inserta comillas, con independencia de la configuración de las opciones.
Escriba Graphic.gif (un nombre de archivo ficticio).

La etiqueta es similar ahora a la siguiente:
```
<IMG src=Graphic.gif 
```
Escriba una barra diagonal (/) y un corchete angular de cierre (>) para cerrar la etiqueta <img>. También puede escribir un espacio y un corchete angular de cierre, y el editor proporciona la barra diagonal automáticamente.

Al cambiar las opciones de formato, el marcado existente en una página no se ve afectado. Sin embargo, puede aplicar la configuración de formato manualmente a una página o a cualquier parte de una página.

Para aplicar el formato a los elementos existentes

En la vista Código fuente, seleccione la primera tabla que creó (la que tenía el marcado en minúsculas).
En el menú Edición, elija Dar formato a la selección.

Los nombres de las etiquetas se cambian a mayúsculas.

Nota

El editor no quita las comillas, aunque haya cambiado la configuración de la opción.Asimismo, el editor no cambia la terminación de las etiquetas existentes, aunque se cambie la opción de cierre de las etiquetas.

Cuando se usan herramientas de edición, como Cuadro de herramientas o Propiedades, para editar elementos, el editor usa el conjunto actual de opciones de formato para generar el marcado. Sin embargo, el editor no cambia el marcado existente. Para aplicar las nuevas opciones de formato al marcado existente, use los comandos Dar formato al documento y Dar formato a la selección en el menú Edición.

Definir las opciones de formato de las etiquetas

Las opciones de formato con las que hemos trabajado hasta este punto se aplican a todos los elementos de la página. Si lo desea, también puede especificar opciones de formato para etiquetas individuales. Este enfoque resulta útil si usa con frecuencia ciertas etiquetas y desea usar un formato distinto del predeterminado para ellas. El formato por etiqueta permite establecer las opciones siguientes:

Cómo se cierran las etiquetas (es decir, si no se cierran, si tienen autocierre o si se usa una etiqueta de cierre independiente).
Cómo se usan los saltos de línea alrededor y dentro de las etiquetas.
Cómo se aplica sangría a los elementos secundarios de una etiqueta.

Nota

El editor HTML omite cualquier configuración de presentación de etiquetas que cambie la manera en que el contenido de la etiqueta se presenta en el explorador.

En esta parte del tutorial, establecerá algunas opciones de formato para las etiquetas. Hasta ahora, ha trabajado con elementos HTML, como el elemento <table>. Ahora, trabajará con algunos controles de servidor web ASP.NET, para que pueda ver que las opciones de formato se aplican por igual a los controles y los elementos.

Para empezar, establecerá algunas opciones que se aplican a todas las etiquetas de un tipo concreto. Puede establecer opciones para los siguientes tipos de elementos:

Elementos HTML que no tienen contenido, como br e input.
Elementos HTML que pueden tener contenido, como table y span.
Elementos de servidor (asp:) que no pueden tener contenido, como asp:image.
Elementos de servidor que pueden tener contenido, como asp:textbox.

Nota sobre la seguridad
Un control TextBox acepta datos proporcionados por el usuario, lo que puede suponer una amenaza para la seguridad.De forma predeterminada, ASP.NET Web Pages valida que los datos proporcionados por el usuario no incluyen elementos HTML ni de script.Para obtener más información, vea Información general sobre los ataques mediante scripts.

En la primera parte de esta sección, agregue una tabla HTML. Cambiará a continuación las reglas de formato de etiquetas para los elementos de tabla y cambiará el formato del documento para ver el efecto de modificar las reglas de formato.

Para establecer las reglas de formato de etiquetas para una tabla HTML

En la vista Código fuente, en una parte en blanco de la ventana, haga clic con el botón secundario y, a continuación, elija Formato y validación.

Nota

El comando Formato y validación solo está disponible en la vista Código fuente.

Aparece el cuadro de diálogo Opciones con las opciones de formato establecidas en la sección anterior.
En la lista Etiqueta de cliente, elija Minúsculas para restablecer el formato de las etiquetas del cliente.
Elija Aceptar para cerrar el cuadro de diálogo Opciones.
En el grupo HTML del Cuadro de herramientas, arrastre a la página un control Table en la vista Código fuente.

El editor crea un elemento <table> que tiene tres filas (elementos <tr>) y tres celdas (elementos <td>) en cada fila. Cada etiqueta está en una línea independiente:
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
En una parte en blanco de la ventana, haga clic con el botón secundario y, a continuación, elija Formato y validación.
Elija Opciones específicas de etiqueta.
Expanda Configuración predeterminada.

Aparece una lista de tipos de etiquetas, que comienza con La etiqueta del cliente no admite contenido. En Configuración predeterminada, puede establecer diferentes opciones para los elementos del cliente y del servidor, para los elementos que tienen contenido (como un elemento table) y para los elementos que no lo tienen (como un elemento img).
Elija La etiqueta del cliente admite contenido.

La configuración predeterminada establece que las etiquetas usan una etiqueta de cierre independiente y que hay saltos de línea delante, dentro y detrás de las etiquetas.
Expanda Etiquetas HTML cliente.
Elija td.

Establecerá opciones para cambiar el formato de las etiquetas td.
En la lista Saltos de línea, elija Ninguno.
Elija Aceptar para cerrar el cuadro de diálogo Opciones específicas de etiqueta y, a continuación, elija Aceptar para cerrar el cuadro de diálogo Opciones.
En el menú Edición, elija Dar formato al documento.

Se cambia el formato del documento. Las etiquetas <td> de la tabla que agregó se colocan en una única línea:

Share via