Recentemente abbiamo introdotto Notepad++, un potente e completo editor di testo distribuito con licenza open source. Notepad++ è particolarmente adatto per la scrittura diretta del codice HTML alla base delle pagine web. In questo articolo vedremo come impostare al meglio il proprio lavoro.
Aperto Notepad++ (per questa guida è stata utilizzata la versione 6.6) creiamo un nuovo documento dal menù “File > Nuovo” e salviamolo con estensione .html attraverso il menù “File > Salva”. A questo punto Notepad++ assumerà automaticamente che il documento creato conterrà codice HTML e ne evidenzierà la relativa sintassi come si può vedere nell’immagine che apre questo post.
Procediamo a questo punto creando gli elementi di base di ogni pagina HTML introducendo i tag <HTML>, <HEAD> e <BODY>. Come abbiamo già accennano nel precedente post iniziando a digitare un elemento di codice HTML Notepad++ proporrà un elenco di suggerimenti compatibili; per sceglierne uno è sufficiente selezionarlo con un doppio click del mouse.
Sul bordo sinistro della finestra di Notepad++ si trovano due elementi molto utili nella stesura del codice HTML. Una prima colonna riporta la numerazione delle righe mentre una seconda colonna più sottile (evidenziata nell’immagine) mostra i blocchi di codice HTML associati ad alcuni tag del linguaggio. Cliccando sul segno [-] che apre ogni blocco è possibile compattarne la visualizzazione in modo da rendere più semplice la lettura del listato. Cliccando invece sul simbolo [+] il blocco viene nuovamente espanso.
Per migliorare la lettura del codice è molto utile organizzare gerarchicamente i blocchi di codice HTML. Nella figura ad esempio si può notare come gli elementi <H1> e <P> siano contenuti in un blocco <DIV> a sua volta interno all’elemento <BODY>. Questa organizzazione gerarchica si ottiene semplicemente rientrando progressivamente il codice attraverso il tasto TAB. L’entità del rietro può essere personalizzata andando nel menù “Configura > Preferenze” e scegliendo poi nella finestra di configurazione le voci “Tabulazioni” ed “html”.