Compartir a través de

Tutorial: Edición HTML básica en Visual Web Developer

  • Artículo

Actualización: noviembre 2007

La herramienta de desarrollo de sitios Web Microsoft Visual Web Developer proporciona una excelente función de edición de HTML que le permite trabajar en el modo WYSIWYG para visualizar páginas Web y también trabajar directamente con formato HTML para tener un mayor control. Este tutorial presenta las características de edición de HTML de Visual Web Developer.

Las tareas ilustradas en este tutorial incluyen lo siguiente:

  • Crear y editar HTML en vista Diseño.

  • Crear y editar HTML en 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:

  • Una idea general de Visual Web Developer.

Para obtener una introducción a la creación de páginas Web en Visual Web Developer, vea Tutorial: Crear una página Web básica en Visual Web Developer.

En este tutorial, va a trabajar con un sitio Web y una sola página Web ASP.NET similar a la que se crea en Tutorial: Crear una página Web básica en Visual Web Developer. Si ya ha realizado ese tutorial, puede utilizar el sitio y la página Web.

Crear el sitio y la página Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos que se describen en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la siguiente sección. 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, haga clic en Nuevo sitio Web.

    Aparecerá 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 desee trabajar.

  6. Haga clic en Aceptar.

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

Trabajar en la vista Diseño

En esta parte del tutorial, aprenderá a trabajar en la vista Diseño, la cual muestra una vista de la página 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 Diseño muestra su página de una manera similar a como aparecerá en un explorador, con algunas diferencias. La primera diferencia es que en la vista Diseño, el texto y los elementos son modificable. La segunda diferencia es que para ayudarle a editar sus páginas, la vista Diseño muestra algunos elementos y controles que no aparecerán en el explorador. Además, algunos elementos, como las tablas HTML, tiene una representación especial de la vista Diseño que agrega espacio adicional para el editor. En general, la vista Diseño le ayuda a visualizar su 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 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 Aplicación de estilo haga clic en Título 1.

  4. Sitúe el puntero de inserción debajo de Página Web ASP.NET y después 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. Haga clic para activar la casilla 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 trabaja en la vista Diseño, tal vez le parezca útil ver las etiquetas de superficie de diseño, como por ejemplo div y span, y otras que no tienen una representación visual.

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

  • En el menú Ver, seleccione Ayudas visuales y, a continuación, haga clic en Controles no visuales de ASP.NET.

    El diseñador muestra los símbolos para párrafos, saltos de línea y otras etiquetas que no representan texto.

Agregar controles y elementos

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

Para agregar controles y una tabla

  1. Sitúe el puntero de inserción a la derecha de la marca de párrafo final para Esta página funciona con ASP.NET, y después presione INTRO.

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

    Nota:

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

  3. Arrastre un control Button a la página.

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

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

    Aparece el cuadro de diálogo Insertar tabla.

  5. 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 Diseño proporciona generadores y otras herramientas para ayudarle a crear elementos de HTML que requieren valores 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.

    Aparece el cuadro de diálogo Hipervínculo.

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

  4. Haga clic en Aceptar.

Configurar propiedades en la ventana Propiedades

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

Para establecer las propiedades utilizando la ventana Propiedades

  1. Haga clic en el control Button que agregó en "Adición de controles y elementos" con anterioridad en este tutorial.

  2. En Propiedades, establezca Texto en Haga clic aquí, ColorDelTexto en un color diferente y Negrita en true.

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

    Tenga en cuenta que en Propiedades, la propiedad HRef 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 Web Developer inicia el servidor Web Visual Web Developer, que es un servidor Web local que puede utilizar para probar páginas sin utilizar IIS.

Cambiar la vista predeterminada

Como valor predeterminado, Visual Web Developer abre las nuevas páginas 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. En el cuadro de diálogo Opciones, haga clic en General y, a continuación, debajo de Iniciar páginas en, haga clic en Vista Diseño.

Nota:

Puede ejecutar páginas de varias maneras. Si presiona CTRL+F5, Visual Web Developer 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 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.

Trabajar en la vista Código fuente

La vista Código fuente le 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 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 izquierda 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 propiedades que realizó se conservan como valores de atributos en la etiqueta <asp:button>.

  2. En el grupo HTML en el Cuadro de herramientas (no el grupo Estándar), arrastre un control Table a la página y sitúelo justo encima de la etiqueta de cierre </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. La información de error o advertencia está disponible situando el mouse sobre el texto de marcado.

Para editar HTML en la vista Código fuente

  1. Sitúe el punto de inserción encima de la etiqueta de cierre </form>, y después escriba un paréntesis angular izquierdo (<).

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

  2. Resalte a para seleccionarlo y presione la BARRA ESPACIADORA.

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

  3. En la lista, haga clic en href y después escriba un signo igual y unas comillas dobles (=").

    El editor le ofrece una lista de las páginas disponibles para vincular en este momento y una opción para abrir el cuadro de diálogo Selector de página principal.

  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. Termine el elemento delimitador para que vincule a la página Default.aspx utilizando el texto del vínculo Principal y que ponga lo siguiente:

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

  6. Sitúe el punto de inserción en la etiqueta a.

    Tenga en cuenta que Propiedades muestra los atributos para la etiqueta.

  7. En Propiedades, para la propiedad HRef, haga clic en el botón de puntos suspensivos (…).

    Aparece el cuadro de diálogo Seleccionar elemento de proyecto.

    Ahora, puede seleccionar una página en el sitio Web actual como la página de destino. Si no tiene otras páginas en el sitio Web entre las que elegir, cierre el cuadro de diálogo Seleccionar elemento de proyecto y escriba su dirección URL favorita en el cuadro Href en la ventana Propiedades.

  8. Sitúe el punto de inserción justo encima de la etiqueta de cierre </form> y escriba <no válido>.

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

  9. 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 aplique a la página a menos que especifique explícitamente que el editor dé un nuevo formato al 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"        Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />

    Observe que después de aplicar una sangría en el primer atributo, si presiona INTRO 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 punto de inserción debajo del nuevo control Button, haga clic con el botón secundario del mouse y después haga clic en Pegar.

    De este modo se crea un botón con el ID de Button2.

  5. Desde el grupo Estándar del Cuadro de herramientas, arrastre un tercer control Button a la página, con lo que se crea <Button3>.

  6. Cambie a la vista de Códigofuente.

    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 elementos asp:button.

    Nota:

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

  7. Edite el documento de modo que <Button1> y <Button2> estén en la misma línea sin que haya un espacio entre ellos:

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

    Los elementos pueden ajustarse, pero el final de <Button1> (es decir, />) debe ir seguido inmediatamente por el comienzo de <Button2> (es decir <asp:Button ID=).

  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 de código fuente

  10. En el menú Edición, 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 separara los botones, insertaría un espacio durante la representación. Por lo tanto, el editor no cambia el formato que ha creado.

Trabajar en la vista en dos paneles

Puede ver al mismo tiempo las ventanas de la vista Código fuente y de la vista Diseño 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.

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 Web Developer 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.

  • Explorador 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 en el 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, se selecciona 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 punto de inserción en la etiqueta <asp: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 <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 utilizar el explorador de etiquetas para que le ayude a mover o copiar elementos.

Para mover o copiar elementos mediante el explorador de etiquetas

  1. Utilizando el explorador de etiquetas, seleccione la etiqueta <tr> que contiene <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, sitúe el puntero de inserción 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.

  • Como valor predeterminado, el editor crea marcado que es compatible con el estándar XHTML 1.1 y convierte todos los nombres de etiquetas HTML a minúscula, aunque los escriba en mayúscula. El editor también encierra valores de atributo (propiedad) entre comillas. Para obtener más información, vea Tutorial: Edición HTML avanzada en Visual Web Developer.

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 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 le ha ofrecido información general sobre las funciones HTML del editor de páginas Web. Esto incluye cómo crear HTML en las vistas Diseño y Código fuente, formato básico y navegación. Tal vez desee aprender más sobre las funciones de edición en Visual Web Developer. Por ejemplo, quizá quiera hacer lo siguiente:

Vea también

Tareas

Tutorial: Edición HTML avanzada en Visual Web Developer

Conceptos

Vista Diseño

Referencia

Código fuente (Vista)