Tutorial: Edición HTML avanzada en Visual Web Developer

  • Artículo

Actualización: noviembre 2007

La herramienta de desarrollo Web Microsoft Visual Web Developer proporciona una completa experiencia de edición HTML para crear páginas Web. Este tutorial presenta algunas de las características más avanzadas de edición HTML de Visual Web Developer.

Nota:

Para obtener una introducción a la edición HTML, vea Tutorial: Edición HTML básica en Visual Web Developer.

Entre las tareas ilustradas en este tutorial se incluyen las siguientes:

  • Especificar las opciones empleadas por el editor HTML para dar formato a los elementos de la página.

  • Seleccionar las opciones para que el editor HTML creado sea compatible con exploradores concretos.

  • Esquematizar la página; es decir, crear regiones plegables en el editor para reducir el desorden.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Una idea general acerca del trabajo con Visual Web Developer.

Para obtener una introducción a Visual Web Developer, vea Tutorial: Edición HTML básica en Visual Web Developer.

Crear el sitio y la página Web

Si ya ha creado un sitio Web en Visual Web Developer (completando la sección Tutorial: Edición HTML básica en Visual Web Developer), vaya a la sección siguiente. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Sitio web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  4. En el cuadro Ubicación, 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. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

    Nota:

    De forma predeterminada, Visual Web Developer crea páginas Web ASP.NET utilizando el modelo de código subyacente. Para obtener más información, vea Modelo de código de las páginas web ASP.NET. En este tutorial, no utilizará la página de código subyacente.

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, una característica importante del formato HTML es que se tiene control final sobre el diseño y la apariencia del marcado de la página. Puede dar formato a los elementos manualmente (por ejemplo, insertando sangrías) y el editor no alterará el formato a menos que pida explícitamente que se cambie el formato del marcado.

En esta parte del tutorial, explorará las diferentes opciones de formato y verá el efecto de las distintas configuraciones. También aprenderá a aplicar formato a la página entera o a una selección dentro de la página.

Nota:

Este tutorial sólo revisa las características de formato que son únicas del trabajo con HTML. Como editor de texto de Visual Web Developer, el editor HTML también admite diversas opciones que se aplican a toda la edición de texto, como la definición del tamaño de la tabulación y el ajuste de línea. Para obtener información acerca de las opciones generales de edición de texto, vea Modificar texto, código y marcado.

En esta parte del tutorial, agregará HTML simple a la página, cambiará las opciones de formato y, a continuación, agregará más HTML. Esto muestra cómo los cambios de la configuración afectan al formato del código HTML.

Para agregar elementos HTML con opciones de formato predeterminadas

  1. Cambie a la vista Diseño.

  2. En el menú Tabla, haga clic en Insertar tabla y, a continuación, en Aceptar.

    No cambie ninguno de los ajustes predeterminados del cuadro de diálogo.

    El diseñador crea una tabla HTML con dos columnas y dos filas.

  3. Debajo de la tabla, haga clic en la página.

  4. 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.

  5. Cambie a la vista Código fuente.

    Verá que los elementos <table> y <img> se han insertado en la página.

    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

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

  2. Haga clic en Editor de texto, expanda HTMLy, a continuación, haga clic en Validación.

  3. En la lista Destino, haga clic en XHTML 1.0 Transitional.

  4. Haga clic en Formato.

    Puede establecer separadamente algunas opciones para las etiquetas del servidor (controles de servidor ASP.NET) y las etiquetas del cliente (elementos HTML) haciendo clic en el botón Opciones específicas de etiqueta.

  5. En la lista Etiqueta del cliente, haga clic en Mayúsculas.

  6. Desactive las casillas Insertar comillas de valores de atributos al aplicar formato e Insertar comillas de valores de atributos al escribir.

  7. Haga clic en 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

  1. En vista Código fuente, desplácese a la parte inferior de la página.

  2. 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.

  3. 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 escriben en mayúsculas, porque esa es la opción que se ha establecido para el formato.

  4. En la lista, haga doble clic en IMG y, a continuación, presione la BARRA ESPACIADORA.

    Aparece la lista de atributos de la etiqueta <img>. Los atributos están en minúsculas, porque al establecer las opciones de formato, dejó Atributos del cliente como configuración predeterminada de Minúsculas.

  5. En Propiedades, establezca Src como graphic.gif, que es un nombre de archivo inventado, y asegúrese de que la etiqueta tiene ahora un aspecto similar al siguiente:

    <IMG src=graphic.gif

    Como la opción Insertar comillas de valores de atributos al escribir se ha deshabilitado en el procedimiento anterior, el editor no escribe automáticamente el atributo entre comillas.

    Nota:

    El editor inserta comillas, con independencia de la configuración de las opciones, si el atributo las requiere, como en el caso de que un valor de atributo contenga un espacio.

  6. Escriba una barra diagonal (/) y un corchete angular de cierre (>) para cerrar la etiqueta <img>.

Como se ha indicado anteriormente en esta sección, las opciones de formato establecidas no se han aplicado al marcado existente en la página. Sin embargo, si lo desea, puede aplicar la configuración de formato a la página o a los distintos elementos de ésta.

Para aplicar el formato a los elementos existentes

  1. En vista Código fuente, resalte la primera tabla que creó para seleccionarla.

  2. En el menú Edición, señale Avanzado y, a continuación, haga clic en Dar formato a la selección.

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

    Nota:

    El editor no quita las comillas, aunque se cambie 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.

Este ejemplo permite comprobar el funcionamiento del formato en el editor HTML. Cuando se usan las herramientas de edición, como Cuadro de herramientas o Propiedades, para editar elementos, el editor utiliza el conjunto actual de opciones de formato para generar el marcado. Sin embargo, el editor no cambia el marcado existente. Si desea aplicar las nuevas opciones de formato al marcado existente, puede hacerlo manualmente utilizando los comandos del 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. Esto resulta útil si usa con frecuencia ciertas etiquetas y desea utilizar un formato distinto del predeterminado para esas etiquetas. El formato por etiqueta permite establecer las opciones de formato siguientes:

  • Cómo se cierran las etiquetas (es decir, si no se cierran, si tienen autocierre o si se utiliza 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 los elementos secundarios de una etiqueta.

    Nota:

    La regla que indica que el editor HTML no modificará la representación de las etiquetas puede reemplazar a las reglas de formato específicas de las etiquetas establecidas por el usuario. Si una regla de formato de etiqueta cambia la manera en que se procesa una etiqueta, se pasa por alto.

En esta parte del tutorial, establecerá algunas opciones de formato de etiquetas y verá cómo funciona el editor con ellas. Hasta ahora, ha trabajado con elementos HTML, como el elemento <table>. Ahora, trabajará con algunos controles de servidor 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 de seguridad:

Un control TextBox acepta datos proporcionados por el usuario, lo que puede suponer una amenaza para la seguridad. De forma predeterminada, las páginas Web ASP.NET validan los datos escritos por el usuario para comprobar que no incluyen secuencias de comandos ni elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

En la primera parte de esta sección, agregará 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 la regla de formato.

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

  1. 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, haga clic en Formato y validación.

    Aparece el cuadro de diálogo Opciones con las opciones de formato establecidas en la sección anterior.

  2. En la lista Etiqueta de cliente, haga clic en Minúsculas para restablecer el formato de las etiquetas del cliente.

  3. Haga clic en Aceptar para cerrar el cuadro de diálogo Opciones.

  4. Desde el grupo HTML del Cuadro de herramientas, arrastre un control Table hasta la página.

    El editor crea un elemento <table> que tiene dos filas (elementos <tr>) y dos celdas (elementos <td>) en cada fila. Cada etiqueta está en una línea independiente:

    <table>
    <tr>
        <td>
       </td>
    </tr>

  5. En una parte en blanco de la ventana, haga clic con el botón secundario y, a continuación, haga clic en Formato y validación.

  6. Haga clic en el botón Opciones específicas de etiqueta.

  7. Expanda Configuración predeterminada.

    Aparece una lista de tipos de etiquetas, que comienza con La etiqueta del cliente no admite contenido. Mediante la selección de un elemento de la lista, 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).

  8. Haga clic en 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.

  9. Expanda Etiquetas HTML cliente.

  10. Haga clic en td.

    Establecerá opciones para cambiar el formato de las etiquetas td.

  11. En la lista Saltos de línea, haga clic en Ninguno.

  12. Haga clic en Aceptar para cerrar el cuadro de diálogo Opciones específicas de etiqueta y, a continuación, haga clic en Aceptar para cerrar el cuadro de diálogo Opciones.

  13. En el menú Edición, señale Avanzado y, a continuación, haga clic en 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:

    <table>
    <tr>
        <td></td><td></td><td></td>

Puede trabajar con opciones específicas de etiquetas para un control de servidor ASP.NET.

Para establecer las opciones de formato de un control de servidor ASP.NET

  1. Cambie a la vista Diseño.

  2. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control ListBox hasta la página.

  3. En el cuadro de diálogo Tareas de ListBox, haga clic en Editar elementos.

    Aparecerá el cuadro de diálogo Editor de la colección de ListItem.

  4. Haga clic en Agregar dos veces para agregar dos elementos.

  5. En Miembros, haga clic en el primer ListItem y, a continuación, en Propiedades de ListItem, establezca Text como Item 1.

  6. En Miembros, haga clic en el primer ListItem y, a continuación, en Propiedades de ListItem, establezca Text como Item 2.

  7. Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de la colección de ListItem.

  8. Cambie a la vista Código fuente.

    El formato del control se ha definido de la siguiente forma:

    <asp:Listbox ID="ListBox1" >
   <asp:ListItem>Item 1</asp:Listitem>
   <asp:ListItem>Item 2</asp:Listitem>
</asp:Listbox>

  9. En una parte en blanco de la ventana, haga clic con el botón secundario y, a continuación, haga clic en Formato y validación.

  10. Haga clic en el botón Opciones específicas de etiqueta.

  11. En el cuadro de diálogo Opciones específicas de etiqueta, haga clic en Controles ASP.NET y, a continuación, haga clic en Nueva etiqueta.

  12. En el cuadro Nombre de etiqueta, escriba asp:listitem.

    No escriba los corchetes angulares de apertura y cierre (< y >) como parte del nombre de etiqueta.

    Está estableciendo opciones para el elemento asp:ListItem que se utiliza dentro de un control ListBox. No establece opciones para el elemento asp:ListBox porque desea controlar cómo se da formato al contenido (elementos secundarios) del elemento asp:ListBox.

  13. Haga clic en Aceptar para cerrar el cuadro de diálogo Nueva etiqueta.

  14. En la lista Saltos de línea, haga clic en Ninguno.

    Esto hará que el control no contenga ningún salto de línea.

  15. Haga clic en Aceptar para cerrar el cuadro de diálogo Opciones específicas de etiqueta y, a continuación, haga clic en Aceptar para cerrar el cuadro de diálogo Opciones. Ahora puede ver el efecto de las nuevas opciones de formato.

Para agregar un control de servidor ASP.NET con las nuevas opciones de formato

  1. Cambie a la vista Diseño.

  2. Desde el grupo Estándar del Cuadro de herramientas, arrastre un segundo control ListBox hasta la página.

  3. En el menú Tareas de ListBox, haga clic en Editar elementos.

  4. Para el control ListBox, cree dos elementos como en el procedimiento anterior.

  5. Cambie a la vista Código fuente.

    Observe que todos los elementos <asp:ListItem> se encuentran en una línea. El elemento </asp:ListBox> aparece en la línea siguiente porque el ajuste de etiqueta se ha establecido en 80 caracteres. Puede modificar este valor en el cuadro de diálogo Opciones. Aunque sólo ha trabajado con dos controles y modificado una opción de formato (los saltos de línea), puede ver cómo se aplican las opciones a todos los elementos con los que suele trabajar.

Esquematizar elementos

En la vista Código fuente, puede esquematizar elementos (contraerlos y expandirlos) para que no estorben cuando no se trabaja con ellos. Esto resulta especialmente útil para elementos como las tablas, que suelen ocupar mucho espacio. La característica de contracción también se puede utilizar para todos los elementos de la página.

Para esquematizar elementos

  1. Cambie a la vista Código fuente.

  2. Seleccione una de las tablas que agregó anteriormente.

    • Si ya no tiene las tablas, desde el grupo HTML del Cuadro de herramientas, arrastre una a la página.

  3. En el menú Edición, elija Esquematización y, a continuación, haga clic en Ocultar selección.

    Se contrae la etiqueta <table> y se muestra un signo más (+) en el margen.

  4. Haga clic en el signo más para expandir el elemento de la tabla. También puede configurar los elementos de manera que los signos más (+) y menos (-) aparezcan automáticamente en el margen cuando los elementos superen un tamaño concreto.

Para configurar cómo se esquematizan los elementos automáticamente

  1. Haga clic con el botón secundario en la página, haga clic en Formato y validación, haga clic en Formato y, a continuación, haga clic en Opciones específicas de etiqueta.

  2. En el cuadro de diálogo Opciones específicas de tabulación, expanda Etiquetas HTML cliente y, a continuación, haga clic en tabla.

  3. En Esquematización en el editor de código, en el cuadro Mínimo de líneas, escriba 5.

  4. Haga clic en Aceptar y, a continuación, haga clic en Aceptar.

    Para las tablas existentes y cualquier nueva tabla que se agregue, la esquematización aparece automáticamente si la tabla tiene más de cinco líneas.

Validar HTML

El editor HTML puede validar el código HTML o comprobar que cumple las reglas de exploradores o estándares concretos, como XHTML. Por ejemplo, el editor puede encontrar etiquetas y atributos no aceptados por Netscape Navigator 4.0 o que no cumplen los estándares XHTML. En esta parte del tutorial, trabajará con diferentes esquemas (tipos de exploradores o estándares) e insertará diversos tipos de errores leves para ver cómo los marca el editor.

Para probar la validación en el editor

  1. En la vista Código fuente, abra la página Default.aspx o cambie a ella.

  2. En la barra de herramientas Edición de código fuente HTML, en la lista, haga clic en Internet Explorer 3.02/Netscape Navigator 3.0.

  3. Desplácese a la parte inferior de la página.

  4. Dentro de la etiqueta </form>, escriba el código HTML siguiente:

    <font face=arial>
<a href=Default.aspx >Default Page </a>
</font>

    Mientras escribe, la tecnología IntelliSense de Microsoft proporciona ayuda para completar las etiquetas.

  5. En la barra de herramientas Edición de código fuente HTML, en la lista, haga clic en XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6).

    Después de una pausa corta (ya que la validación se realiza como tarea en segundo plano), verá líneas onduladas rojas debajo de diversas partes de las etiquetas. Como un corrector ortográfico, la característica de validación HTML encuentra el marcado de la página que el explorador actualmente seleccionado no puede aceptar.

  6. En la etiqueta <font>, descanse el puntero del mouse sobre palabra font.

    Una información sobre herramientas indica que el elemento font se considera desfasado. Los estándares actuales recomiendan utilizar los estilos de la hoja de estilos en cascada para el formato de texto. Por ejemplo: <span style="font-name:Arial;">.

  7. En el atributo href de la etiqueta <a>, descanse el puntero del mouse sobre Default.aspx.

    Una información sobre herramientas le comunica que, en el esquema actual, los atributos deben aparecer entre comillas.

  8. Escriba Default.aspx entre comillas.

    El valor del atributo href ya no aparece subrayado. Si utiliza referencias relativas para las etiquetas delimitadoras o para otras etiquetas que requieren una dirección URL, la validación determina si el elemento de destino está disponible.

  9. En la línea situada debajo del código HTML con el que está trabajando, escriba un corchete angular de apertura (<).

    Aparece la lista desplegable de IntelliSense, pero esta vez no ofrece font, porque el elemento font no es válido en los esquemas XHTML.

  10. Elimine el corchete angular de apertura (<).

Establecer opciones de validación

Puede controlar los tipos de errores mostrados por la validación. Esto resulta útil si se desea que la validación encuentre ciertos tipos de errores, aun cuando éstos se consideren admisibles en un esquema determinado.

Para establecer las opciones de validación

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

    Nota:

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

  2. En el cuadro de diálogo Opciones, haga clic en Validación.

    Observe que, con independencia de si la casilla Mostrar errores está activada o desactivada, la visualización de errores para las casillas no está habilitada. Esto se debe a que el esquema actual es XHTML, que ya muestra todos los posibles errores de validación.

  3. En la lista Destino, haga clic en Internet Explorer 6.

  4. Asegúrese de que la casilla Mostrar errores está activada y, a continuación, en Mostrar errores, active todas las casillas.

  5. Haga clic en Aceptar para volver al editor.

  6. Seleccione el código HTML que escribió en el procedimiento anterior y, a continuación, en el menú Edición, haga clic en Poner en mayúsculas.

    Después de una pausa breve, se subrayan los nombres de etiqueta. Cuando se descansa el puntero del mouse sobre un nombre de etiqueta, una información sobre herramientas indica que el nombre contiene letras mayúsculas. Generalmente, Internet Explorer 6 permite nombres de etiquetas en mayúsculas, pero este error de validación aparece ahora porque se han modificado las opciones de validación de ese esquema.

La validación también puede encontrar otros muchos tipos de errores, como Id. de controles duplicados, etiquetas de apertura y cierre cruzadas (por ejemplo, <b><i></b></i>), etc. Sin embargo, la validación en el editor no impide la creación de cualquier código HTML que se desee. La validación simplemente identifica el marcado que no cumple las reglas del explorador especificado.

Debe entender que, cuando se ejecuta una página ASP.NET, el resultado se compone no sólo de los elementos HTML creados, sino también de HTML representado por los controles de servidor ASP.NET y de todo el código escrito en la página. La validación no puede examinar el resultado de esos elementos dinámicos; es decir, el editor no puede examinar la validez del resultado generado. De manera predeterminada, los controles ASP.NET generan resultados compatibles con los estándares XHTML 1.1. Esto significa que el resultado es adecuado para la mayoría de los exploradores. Para obtener más información sobre el marcado generado por los controles ASP.NET, vea ASP.NET y XHTML.

Pasos siguientes

Este tutorial ha presentado algunas de las características más avanzadas del editor HTML. Aunque el tutorial no ha ilustrado todas las características, ha podido ver cómo las opciones de formato, la esquematización y la validación pueden ayudar a generar marcado con formato personalizado y bien configurado, sin privar al usuario del control final del marcado.

Vea también

Conceptos

XHTML en Visual Web Developer

Validación de formato en Visual Web Developer

Otros recursos

Modificar texto, código y marcado

Compatibilidad de productos y accesibilidad