Una nuova pagina HTML contiene pochi elementi obbligatori: il marcatore <html> </html> ne indica l'inizio e la fine, il marcatore <head> </head> indica l'inizio e la fine dell'intestazione in cui deve essere presente obbligatoriamente solo il titolo della pagina identificato da <title> </title> e visibile nella parte alta della finestra del browser, infine <body> e /<body> indicano la zona della pagina in cui saranno presenti i contenuti visibili dal navigatore.
Passo 1
Dopo aver lanciato il programma, la prima operazione consiste nel selezionare File > New Document. Il programma genera automaticamente una pagina vergine con i marcatori obbligatori al proprio posto. Il titolo contiene la parola "Untitled" nell'attesa che noi si indichi qualcos'altro.
Notate la presenza della scritta <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, si tratta di un marcatore ereditato da SGML (Standard Generalized Markup Language), da cui HTML deriva. Indica che il documento che stiamo creando rispetta le specifiche HTML 4.01 definite dal World Wide Web Consortium (http://www.w3c.org) e ammette alcune deroghe rispetto all'implementazione (Transitional) in modo da garantire anche la compatibilità con browser non completamente aggiornati.

Passo 2
Posizioniamo il cursore nella finestra di editing del codice subito dopo il tag <title> e selezioniamo la parola Untitled. Notate che in cima alla finestra visualizzata compare la scritta "Untitled*" a indicare che il file non ha ancora un nome e non è ancora stato salvato.

Passo 3
Digitiamo il nuovo titolo "Corso Webmaster - Esercizio di creazione di una pagina vergine". Notate le la scritta va oltre la parte visibile della finestra e perciò non riusciamo a leggerla per intero.

Passo 4
Attiviamo quindi la funzione di ritorno a capo automatico delle righe (soft wrap) che ci permetterà di vedere sempre per intero ciascuna riga, ripiegandola a schermo, ma senza inserire ritorni a capo permanenti. Per farlo selezioniamo Edit > Preferences > Editor e marchiamo la prima casella del riquadro Word Wrap Options.

Passo 5
Adesso torniamo alla finestra di lavoro e notiamo che la riga 5, corrispondente al nostro titolo, è stata ripiegata e continua sotto senza che però alla riga sotto compaia una nuova numerazione. Infatti la riga 6 contiene il termine della sezione </head> come prima e nel bordo sinistro della seconda riga del titolo vediamo comparire il simbolo di una freccia con una linea tratteggiata che simboleggia il ritorno a capo non permanente.

Passo 6
Vediamo che aspetto avrà la nostra pagina una volta visualizzata nel browser, perciò clicchiamo Preview nella barra di selezione alla base della nostra finestra di editing. Si apre la finestra di anteprima dove vediamo il titolo nella parte alta e niente nella parte centrale (body).

Passo 7
Torniamo alla finestra Editor e inseriamo un ritorno a capo forzato prima della parola "Esercizio". Notate che adesso la seconda parte dell'elemento <title> è occupa una nuova riga, identificata dal numero sequenziale 6, e che il codice del marcatore <title> è suddiviso su due righe differenti.

Continua >
|