Procedura dettagliata: modifica di codice HTML avanzata nelle pagine Web Form di Visual Studio

Articolo
11/15/2012

In Microsoft Visual Studio sono forniti maggiori strumenti di modifica HTML per la creazione di pagine Web. In questa procedura dettagliata sono illustrate alcune delle più avanzate funzionalità di modifica HTML disponibili in Visual Studio. Per un'introduzione alla modifica HTML, vedere Procedura dettagliata: modifica di codice HTML di base nelle pagine Web Form di Visual Studio.

Nota

Gli esempi in questo argomento sono specifici delle pagine Web Form ASP.NET.Tuttavia, è possibile utilizzare le opzioni di formattazione HTML per il markup in pagine Web Form, visualizzazioni di ASP.NET MVC (Model View Controller), Pagine Web ASP.NET e pagine HTML.

Di seguito vengono illustrate le attività incluse nella procedura dettagliata:

Specifica delle opzioni relative al modo in cui l'editor HTML visualizza il markup nella visualizzazione Origine.
Selezione delle opzioni per rendere l'editor HTML creato compatibile con uno schema specifico (standard di markup), come HTML5.
Descrizione della struttura della pagina, ovvero creazione di aree comprimibili nell'editor per evitare confusione.

Prerequisiti

Per completare questa procedura dettagliata, è necessario quanto segue:

Informazioni di base sull'utilizzo di Visual Studio.

Per un'introduzione a Visual Studio, vedere Procedura dettagliata: modifica di codice HTML di base nelle pagine Web Form di Visual Studio.

Creazione del sito e della pagina Web

Se è già stato creato un progetto Web Form in Visual Studio, ad esempio completando Procedura dettagliata: modifica di codice HTML di base nelle pagine Web Form di Visual Studio, passare alla sezione successiva. In caso contrario, creare un progetto e una pagina Web nuovi attenendosi alla seguente procedura.

Per creare un progetto di sito Web di tipo file system

Aprire Visual Studio.
Scegliere Nuovo sito Web dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo sito Web.

Nota

In questa procedura dettagliata viene utilizzato un progetto di sito Web.In alternativa è possibile utilizzare un progetto di applicazione Web.Per ulteriori informazioni sulle differenze tra questi tipi progetti Web, vedere Confronto tra progetti di applicazione Web e progetti di sito Web.
In Installato, selezionare il linguaggio di programmazione preferito.
Nel riquadro Modelli selezionare Sito Web Form ASP.NET.
Nella casella Percorso immettere il nome della cartella in cui salvare le pagine del sito Web.

Digitare, ad esempio, il nome di cartella C:\WebSites.
Scegliere OK.
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web e quindi scegliere Aggiungi nuovo elemento.
In Installato, scegliere il linguaggio che si desidera utilizzare.
Nel riquadro Modelli selezionare Web Form.
Scegliere Aggiungi.

Formattazione del markup

Nell'editor HTML sono disponibili varie opzioni di formattazione del markup nelle pagine. Di seguito sono riportate alcune opzioni di formattazione:

Possibilità di utilizzare lettere maiuscole oppure minuscole per i tag e i nomi di attributi. È possibile specificare le opzioni separatamente per i tag HTML e per i controlli server Web ASP.NET.
Possibilità di aggiungere gli attributi delimitandoli fra virgolette.
Possibilità di chiudere gli elementi automaticamente nell'editor. Le scelte includono la creazione di tag di chiusura automatica (ad esempio, <br />), la creazione di tag di apertura e di chiusura (<p></p>) e l'inserimento automatico di tag di chiusura.
Modalità di rientro degli elementi figlio di un tag.
Posizione delle interruzioni di riga tra i tag.

Indipendentemente dalle opzioni di formattazione impostate, è possibile disporre del controllo finale sul layout e sull'aspetto del markup nell'editor. È possibile formattare gli elementi manualmente (ad esempio, eseguendone il rientro). Nell'editor la formattazione viene mantenuta invariata, a meno di effettuare in modo esplicito una richiesta di riformattazione del markup.

In questa sezione della procedura dettagliata verranno modificate le impostazioni che influiscono sulla modalità di visualizzazione del markup nell'editor e verranno verificati gli effetti di tali modifiche. Saranno inoltre fornite informazioni sull'applicazione della formattazione a un'intera pagina o a una parte selezionata della pagina.

Per aggiungere elementi HTML in cui sono presenti opzioni di formattazione predefinite

Passare alla visualizzazione Progettazione.
Dal menu Tabella scegliere Inserisci tabella. Non modificare le impostazioni predefinite nella casella di dialogo.
Scegliere OK.

Nella finestra di progettazione viene creata una tabella HTML con due colonne e due righe.
Fare clic sulla pagina, al di sotto della tabella.
Premere INVIO più volte per creare uno spazio vuoto, quindi dal gruppo HTML nella Casella degli strumenti, trascinare un controllo Image nella pagina.
Passare alla visualizzazione Origine.

Si noterà che gli elementi <table>e <img> sono stati inseriti nella pagina. L'elemento <img> viene evidenziato.

Per impostazione predefinita, nella finestra di progettazione sono creati elementi in cui i nomi dei tag e sono in minuscolo e quelli degli attributi sono racchiusi tra virgolette.

È ora possibile modificare le opzioni di formattazione.

Per modificare le opzioni di formattazione e di convalida

Scegliere Opzioni dal menu Strumenti.
Scegliere Editor di testo, espandere HTML e quindi fare clic su Convalida.
Nell'elenco Destinazione scegliere HTML5.

Nota

Anziché selezionare manualmente uno schema predefinito per la convalida delle nuove pagine, è possibile scegliere Utilizza doctype per rilevare lo schema di convalida.Questa opzione indicherà a Visual Studio di utilizzare la dichiarazione di pagina DOCTYPE per determinare lo schema da utilizzare per la convalida.In questa procedura dettagliata lasciare deselezionata questa casella di controllo in modo da verificare in che modo la scelta dello schema di destinazione influisce sul funzionamento dell'editor.
Scegliere Formattazione.

Le caselle a discesa Tag client e Attributi client sono abilitate perché nel passaggio precedente è stato selezionato HTML5. Se l'impostazione Destinazione è stata lasciata impostata su XHTML5, queste due caselle a discesa devono essere impostate su Minuscolo e disabilitate perché XHTML5 richiede lettere minuscole.

Nota

È possibile impostare alcune opzioni in modo separato per tag server (controlli server ASP.NET) e tag client (elementi HTML) specifici. A tale scopo, fare clic sul pulsante Opzioni specifiche dei tag.Si utilizzerà questa funzionalità più avanti nella procedura dettagliata.
Impostare l'opzione Tag client su Maiuscolo.
Deselezionare le caselle di controllo Inserisci valori di attributo tra virgolette durante la digitazione e Inserisci valori di attributo tra virgolette durante la formattazione.
Scegliere OK per tornare all'editor.

Sebbene siano state modificate le opzioni di formattazione, il markup esistente nelle pagina non viene modificato.

È ora possibile aggiungere nuovi elementi.

Per aggiungere elementi HTML utilizzando le nuove opzioni di formattazione

Nella visualizzazione Origine scorrere fino alla parte inferiore della pagina.
Dal gruppo HTML della Casella degli strumenti, trascinare un controllo Table nella pagina e posizionarlo sopra il tag </form>.

In questa fase, i tag presenti nell'elemento <TABLE> sono in lettere maiuscole.
Posizionare il punto di inserimento al di sotto della tabella creata, quindi digitare una parentesi angolare sinistra (<) per iniziare un nuovo tag.

Viene visualizzato un elenco in cui i nomi dei tag sono in lettere maiuscole dal momento questa è attualmente l'impostazione predefinita.
Digitare img in lettere minuscole.

IMG viene visualizzato nell'elenco in lettere maiuscole, in base alla nuova impostazione predefinita per i tag.
Premere la BARRA SPAZIATRICE.

<IMG viene inserito nella pagina in lettere maiuscole e viene visualizzato un elenco di attributi per il tag. Gli attributi sono in lettere minuscole dal momento che, in fase di impostazione delle opzioni di formattazione, è stata lasciata l'opzione Minuscole come impostazione predefinita per Attributi client.
Digitare src=.

In genere, l'editor fornisce una coppia di virgolette doppie dopo il segno di uguale. Tuttavia, poiché è stata deselezionata l'opzione Inserisci valori di attributo tra virgolette durante la digitazione, non verranno fornite dall'editor.

Nota

Se si immette un valore di attributo contenente uno spazio nella finestra Proprietà, l'editor inserisce le virgolette a prescindere dell'impostazione delle opzioni.
Digitare Graphic.gif (un nome file fittizio).

Il tag sarà simile al seguente:
```
<IMG src=Graphic.gif 
```
Digitare una barra (/) e una parentesi angolare destra (>) per chiudere il tag <img>. È inoltre possibile digitare uno spazio e una parentesi angolare destra per fare in modo che l'editor inserisca la barra automaticamente.

Quando vengono modificate le opzioni di formattazione, il markup esistente in una pagina non verrà modificato. Tuttavia, è possibile applicare le impostazioni di formattazione manualmente in una pagina o in qualsiasi parte di una pagina.

Per applicare la formattazione agli elementi esistenti

Nella visualizzazione Origine selezionare la prima tabella creata (quella con il markup in lettere minuscole).
Scegliere Selezione formato dal menu Modifica.

I nomi di tag vengono convertiti in maiuscole.

Nota

Nell'editor non vengono eliminate le virgolette, anche se l'impostazione dell'opzione è stata modificata.Allo stesso modo, nell'editor non viene modificata la parte finale dei tag esistenti, nemmeno in caso di modifica dell'opzione relativa alla modalità di chiusura dei tag.

Quando si utilizzano gli strumenti di modifica, ad esempio la Casella degli strumenti oppure Proprietà per modificare gli elementi, nell'editor viene utilizzato il set corrente di opzioni di formattazione per generare il markup. Tuttavia, nell'editor non viene modificato alcun markup esistente. Per applicare nuove opzioni di formattazione al markup esistente, utilizzare i comandi Formatta documento e Selezione formato dal menu Modifica.

Impostazione delle opzioni di formattazione dei tag

Le opzioni di formattazione utilizzate fino a questo punto si applicano a tutti gli elementi nella pagina. È anche possibile specificare opzioni di formattazione per tag singoli. Tale approccio può risultare utile in caso di utilizzo della formattazione non predefinita per determinati tag utilizzati di frequente. Questo tipo di formattazione per tag consente di impostare le opzioni riportate di seguito:

Modalità di chiusura dei tag, vale a dire non chiuso, terminato da se stesso o con un tag di chiusura separato.
Modalità di utilizzo delle interruzioni di riga adiacenti e all'interno dei tag.
Modalità di rientro degli elementi figlio di un tag.

Nota

L'editor HTML ignorerà qualsiasi impostazione di visualizzazione dei tag che possa modificare la modalità di rendering del contenuto nel browser.

In questa parte della procedura dettagliata si imposteranno varie opzioni di formattazione per i tag. Fino a questa punto, sono stati utilizzati elementi HTML, ad esempio l'elemento <table>. Ora, invece, saranno utilizzati alcuni controlli server Web ASP.NET, in modo da osservare che le opzioni di formattazione possono essere applicate in modo identico ai controlli e agli elementi.

Per iniziare, saranno impostate alcune opzioni che si applicano a tutti i tag di un certo tipo. È possibile impostare le opzioni per i tipi di elementi riportati di seguito:

Elementi HTML senza contenuto, ad esempio br e input.
Elementi HTML che possono disporre di contenuto, ad esempio table e span.
Elementi server (asp:) che non possono disporre di contenuto, ad esempio asp:image.
Elementi server che possono disporre di contenuto, ad esempio asp:textbox.

Nota sulla sicurezza
Un controllo TextBox accetta gli input dell'utente e rappresenta quindi una potenziale minaccia alla sicurezza.Per impostazione predefinita, le pagine Web ASP.NET verificano che l'input dell'utente non includa script o elementi HTML.Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.

Nella prima parte di questa sezione, si aggiungerà una tabella HTML. Successivamente, saranno modificate le regole di formattazione di tag per gli elementi della tabella e si procederà alla riformattazione del documento per osservare gli effetti della modifica delle regole di formattazione.

Per impostare le regole di formattazione dei tag per una tabella HTML

Fare clic con il pulsante destro del mouse su una parte vuota della finestra in visualizzazione Origine, quindi scegliere Formattazione e convalida.

Nota

Il comando Formattazione e convalida è disponibile soltanto in visualizzazione Origine.

Viene visualizzata la finestra di dialogo Opzioni con le opzioni per la formattazione impostate nella sezione precedente.
Scegliere Minuscole nell'elenco Tag client per reimpostare la formattazione per i tag client.
Scegliere OK per chiudere la finestra di dialogo Opzioni.
Dal gruppo HTML nella Casella degli strumenti trascinare un controllo Table nella pagina in visualizzazione Origine.

L'editor consente di creare un elemento <table> che dispone di tre righe (elementi <tr>) e di tre celle (elementi <td>) in ogni riga. Ciascun tag si trova in una riga separata.
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
Fare clic con il pulsante destro del mouse su una parte vuota della finestra e scegliere Formattazione e convalida.
Scegliere Opzioni specifiche dei tag.
Espandere Impostazioni predefinite.

Viene visualizzato un elenco di tipi di tag, a partire da Il tag client non supporta contenuto. In Impostazioni predefinite è possibile impostare opzioni differenti per gli elementi client e server, per gli elementi che dispongono di contenuto (ad esempio, l'elemento table) e per gli elementi che non dispongono di contenuto (ad esempio, un elemento img).
Scegliere Il tag client supporta contenuto.

Notare che l'impostazione predefinita consiste nell'utilizzo, nei tag, di un tag di chiusura separato e che nei tag sono presenti interruzioni di riga prima, all'interno e dopo il tag.
Espandere Tag HTML client.
Scegliere td.

Saranno impostate le opzioni per modificare le modalità di formattazione dei tag td:
Nell'elenco Interruzioni di riga scegliere Nessuna.
Scegliere OK per chiudere la finestra di dialogo Opzioni specifiche dei tag, quindi scegliere OK per chiudere la finestra di dialogo Opzioni.
Scegliere Formatta documento dal menu Modifica.

Il documento viene riformattato. I tag <td> nella tabella aggiunta vengono posizionati in una riga singola: