Creazione di una pagina HTML, usando il blocco note.
Di Nunziante Esposito.
***********
Ecco di seguito come si crea una pagina html, usando semplicemente il blocco note di Windows o un'applicazione similare.
Le spiegazioni sono divise in più fasi, e, alla fine del documento, sarà mostrata la pagina completa di esempio.
La pagina creata serve a poter mandare in giro dei link corredati da spiegazioni, che si possono cliccare per poter scaricare un file oppure, aprire una qualsiasi pagina. In questa ottica, la pagina che costruiremo, mostrerà una serie di spiegazioni e dei link, abbinati ognuno a tali spiegazioni.
In particolare, per ogni link verrà mostrata un'etichetta, in modo che non compaiono gli indirizzi (URL), evitando così quegli errori dovuti a indirizzi spezzati o troppo lunghi.
La costruzione di questa pagina è spiegata in varie fasi, con le relative spiegazioni per comprendere a cosa servono i vari comandi, ma vi renderete conto che è più difficile a spiegare che a fare.
Premessa:
Cos'è una pagina html?
In generale:
Comunque, una pagina html ha due elementi fondamentali:
Questa è la teoria, almeno quel poco che serve a capire la struttura essenziale di una pagina. Non essendo questo un corso di html, vediamo come si costruisce in pratica una pagina.
Tra le premesse, abbiamo detto di aprire un file di testo con il blocco note di Windows, quindi, facciamo come segue:
Creazione testata.
La testata di una pagina HTML come suddetto, non è niente altro che tutto quanto serve al sistema per fare in modo che il browser usato interpreti al meglio il codice della pagina ed esegue comandi particolari.
Nel nostro caso, sarà semplicissima e senza avere nemmeno i meta tag, dati che servono ai motori di ricerca per rintracciare la pagina quando è on line su un sito. D'altronde, lo scopo di questa pagina non è certamente quello di pubblicarla su un sito.
La testata, inserita tra i due tag della pagina, sarà quindi:
<head>
<title>
Pagina con i link per scaricare dei file - Nunziante Esposito
</title>
</head>
La pagina nel frattempo sarà diventata:
<html>
<head>
<title>
Pagina con i link per scaricare dei file - Nunziante Esposito
</title>
</head>
Tre o quattro righe vuote.
</html>
Nota bene: la testata in una pagina html può contenere anche altre cose che non è il caso nemmeno di nominare,perché esulano da questa trattazione.
Il tag title, aperto e chiuso ed il testo indicato tra i due tag, mostrano il titolo della pagina, ma solo agli Screen-reader. Infatti, chi vede, tale titolo non lo legge, in quanto non viene mostrato a schermo.
Qualora si volesse far leggere tale titolo come intestazione anche ai vedenti, Quando si inizia il body, si deve scrivere anche un titolo Esplicativo del contenuto della pagina.
Preparazione del body, che accoglierà tutto quello che vogliamo mostrare sulla pagina. Esso sarà composto dal tag di apertura e da quello di chiusura, quindi:
<body>
Qualche riga vuota, premendo tre o quattro volte invio.
</body>
Questi due tag, vanno inseriti tra il tag di chiusura della testata, </head>, e il tag di chiusura della pagina, </html>.
La pagina diventa quindi:
<html>
<head>
<title>
Pagina con i link per scaricare dei file - Nunziante Esposito
</title>
</head>
<body>
Qualche riga vuota, premendo tre o quattro volte invio.
</body>
</html>
Dopo la riga che contiene il tag <body> ci sono tutte le righe di codice per mostrare il contenuto della pagina e a seconda del codice che scriviamo in questo spazio e fino alla chiusura di questo tag, che è: </body>, decidiamo cosa far comparire sulla pagina che stiamo creando, quello che il navigatore vedrà a schermo.
Innanzitutto, quando vogliamo scrivere del testo nel body, dobbiamo creare un paragrafo. Ecco cosa scrivere:
Ammesso che vogliamo far comparire sulla pagina il testo di spiegazioni a corredo di un link che serve per scaricare un file, scriveremo:
<p>
Con il link che segue, possiamo scaricare il file AVGSetup11.zip, il file di installazione dell'antivirus AVG versione 11.
</p>
La pagina diventa quindi:
<html>
<head>
<title>
Pagina con i link per scaricare dei file - Nunziante Esposito
</title>
</head>
<body>
<p>
Con il link che segue, possiamo scaricare il file AVGSetup11.zip, il file di installazione dell'antivirus AVG versione 11.
</p>
</body>
</html>
All'interno di un paragrafo, si possono inserire anche altre cose, come ad esempio un link.
Vediamo come creare un link e, in particolare, come crearlo con una etichetta che nasconde la URL.
Quello che segue è la spiegazione di come creare dei link la cui URL rimane nascosta e sulla pagina viene mostrata solo l'etichetta del link.
Creazione di un link:
Nota:
quanto suddetto, per un indirizzo del tipo http://www.nunzianteesposito.info/_file/_download/AVGSetup11.zip, diventa:
<a href="http://www.nunzianteesposito.info/_file/_download/AVGSetup11.zip">
Ora mettiamo l'etichetta.
Il link completo, con l'esempio fatto sopra, sarà:
<a href="http://www.nunzianteesposito.info/_file/_download/AVGSetup11.zip">Scarica il nuovo antivirus AVG</a>
Il navigatore della pagina, quando si posizionerà sul link, avrà letto dallo Screen-reader: Scarica il nuovo antivirus AVG, link.
Quanto sopra, vale per ogni link che si deve preparare.
Tanto per ricapitolare, usando il testo ed il link come indicato negli esempi sopra, creeremo un paragrafo con al suo interno anche il link. scriveremo, quindi:
<p>
Con il link che segue, possiamo scaricare il file AVGSetup11.zip, il file di installazione dell'antivirus AVG versione 11.
<br /><br />
<a href="http://www.nunzianteesposito.info/_file/_download/AVGSetup11.zip">Scarica il nuovo antivirus AVG</a>
</p>
Questo paragrafo contiene la spiegazione di quale file si scarica ed il link per eseguire il download, ma contiene anche del codice di cui non abbiamo spiegato bene cos'è. Se controllate dopo il testo di spiegazioni, troveremo due tag uguali: <br /><br />
Non è nulla di difficile da capire. Infatti, non è altro che un doppio ritorno a capo. Il tag <br /> è uno dei tag che non ha la chiusura, ecco perché ha uno spazio e una barra prima del segno maggiore che lo chiude.
Il doppio ritorno a capo, serve solo a far dare dal browser una riga di spazio tra il testo di spiegazioni ed il link per il download, corrispondente alla spiegazione.
Il comando <br /> è necessario usarlo ogni qualvolta si vuole far andare a capo il testo, soprattutto se si tratta di un testo lungo. In ogni caso, ogni volta che dobbiamo far andare a capo il testo che stiamo scrivendo, lo inseriremo o all'inizio del testo che deve andare a capo, o su una riga vuota tra i due testi.
Ecco un altro esempio di paragrafo simile al primo:
<p>
Questo manuale serve ad imparare tutti quei comandi da inserire nel codice di una pagina html per inserire tutto quello che vogliamo, al fine di costruire una pagina HTML completa.
<br /><br />
<a href="http://www.nunzianteesposito.info/_file/_download/manuale.zip">Scarica il manuale</a>
</p>
Una volta preparati i vari link, quindi, i paragrafi che comprendono anche il link rispettivo ad ogni spiegazione, non dobbiamo fare altro che chiudere la pagina. Per farlo in modo corretto, anche per una questione di immagine, chiuderemo con una firma che comprende tutte le cose che vogliamo comunicare.
Per esempio, possiamo scrivere un paragrafo con una intestazione, una URL del sito, un indirizzo email, un numero di telefono e magari anche gli indirizzi Skype e MSN. Una firma tipo, Da inserire sempre uguale in queste pagine che creeremo, potrebbe essere:
<p>
Informazioni dal sito Web di:
<a href="http://www.nunzianteesposito.info">Nunziante Esposito</a>
<br />
E-mail:
<a href="mailto:nunziante.esposito@uiciechi.it">Nunziante Esposito</a>
<br />
Recapito GSM: 349 67 23 351
<br />
Skype: nunziante
<br />
<br />
© by Nunziante Esposito
</p>
Completiamo con un paragrafo che contiene il titolo dei contenuti che, per gli esempi suddetti, potrebbe essere:
<p>
Pagina per far scaricare dei software dal sito di Nunziante Esposito
</p>
<br />
Questo testo compare come prima riga del corpo della pagina.
Spiegato tutto quello che serve per costruire le varie parti di questa nostra pagina, usando tutte le parti sopra spiegate, il codice completo della pagina risulterà come di seguito riportato.
Inizio codice della pagina
<html>
<head>
<title>
Pagina con i link per scaricare dei file - Nunziante Esposito
</title>
</head>
<body>
<p>Pagina per far scaricare dei software dal sito di Nunziante Esposito</p><br />
<p>
Con il link che segue, possiamo scaricare il file AVGSetup11.zip, il file di installazione dell'antivirus AVG versione 11.
<br /><br />
<a href="http://www.nunzianteesposito.info/_file/_download/AVGSetup11.zip">Scarica il nuovo antivirus AVG</a>
</p>
<p>
Questo manuale serve ad imparare tutti quei comandi da inserire nel codice di una pagina html per inserire tutto quello che vogliamo, al fine di costruire una pagina HTML completa.
<br /><br />
<a href="http://www.nunzianteesposito.info/_file/_download/manuale.zip">Scarica il manuale</a>
</p>
<p>
Informazioni dal sito Web di:
<a href="http://www.nunzianteesposito.info">Nunziante Esposito</a>
<br />
E-mail:
<a href="mailto:nunziante.esposito@uiciechi.it">Nunziante Esposito</a>
<br />
Recapito GSM: 349 67 23 351
<br />
Skype: nunziante
<br />
<br />
© by Nunziante Esposito
</p>
</body>
</html>
Fine codice della pagina
Una volta che abbiamo scritto tutto il codice come spiegato sopra, dobbiamo salvare il file di testo che abbiamo scritto.
Se si vuole provare subito con questo codice scritto da me, basta copiare il codice che si trova tra le scritte "Inizio codice della pagina" e "Fine codice della pagina" ed incollare in una nuova pagina di Word, per poi salvare in testo normale di Windows.
L'unica raccomandazione, soprattutto per chi usa Jaws versioni dalla 8 in poi, non bisogna incollare normalmente con il comando control più V o con quello del menu modifica, ma bisogna fare un incolla speciale dal menu modifica. Per fare prima, e per chi usa Word 2003, basta premere, uno dopo l'altro, i seguenti tasti: alt, la lettera M e la lettera P.
Una volta dato il comando incolla speciale, bisogna premere freccia su per testo non formattato e premere invio.
Ovviamente, una volta copiato il codice completo della pagina, si può personalizzare ogni cosa come si desidera. Infatti, basta inserire al posto dei dati che ho inserito io, tipo URL, etichette, dati personali e tutto il resto, tutti i dati di vostro interesse.
Una volta salvato il file di testo, per trasformarlo in una pagina html, basta rinominarlo da txt in html. Se il file si chiamava pagina dei link.txt, diventerà pagina dei link.html.
Dopo aver rinominato il file in html, basta selezionarlo e premere invio per far avviare il browser predefinito, Internet Explorer o Mozilla Firefox, che visualizzerà la pagina con i contenuti che abbiamo inserito, quindi, il testo ed i link, che potranno essere utilizzati per gli scopi per i quali li abbiamo previsti.
Per chi non ha mai visto il codice di una pagina html, quello che ho cercato di spiegare sopra, potrebbe risultare complicato, anche se in realtà non lo è, visto che è semplificato al massimo. Infatti, se si apre una pagina html salvata da internet, con il comando salva con nome,ce ne possiamo rendere conto facilmente. Per visionare il codice di una pagina come testo, basta posizionarsi sul file htm o html, quindi, si preme il tasto applicazioni, si sceglie dal menu che si apre il comando modifica e si preme invio.
Anche se troverete tutti i tag principali sopra esposti, tra l'apertura e la chiusura di ognuno di essi, troverete tantissime cose che per gli scopi per i quali ho scritto questo articolo, non servono a nulla, ma che sono importanti per le pagine quando si vogliono preparare con una certa veste estetica, cosa che si fa dopo aver frequentato un corso per lo meno di base per il linguaggio html.
Spero che questo articolo vi sia da sprono, facendovi venire la voglia di imparare anche il resto dell'html. Se a qualcuno venisse la voglia di approfondire, perché gli serve, qualche corso di questo linguaggio è disponibile in redazione, anche qualcuno di quelli semplificati per disabili visivi, per un corso da autodidatta.
Però, e non per togliervi subito la voglia di tentare, sono convinto che c'è bisogno di un corso fatto bene per poter programmare in modo completo e con soddisfazione un sito con questo linguaggio, anche se oggi, con i vari CMS che ci sono, anche noi disabili della vista possiamo con pochissime difficoltà programmare e mantenere un sito, come dimostrato Per esempio, dai siti che seguono:
**************
Per eventuali ulteriori spiegazioni, scrivere a: Nunziante Esposito - Inoltre, puoi visitare il sito personale di Nunziante Esposito