Htmlplayground.com, come generare a richiesta il codice html di una pagina web

I programmi che offrono una comoda interfaccia grafica - il cosiddetto sistema WYSIWYG (what you see is what you get) - con cui vedere man mano i progressi nella costruzione di una pagina web, sono molteplici.

Ma c'è però chi ancora (pochi per la verità) preferisce scrivere "a mano" il codice utilizzando un normalissimo editor di testo e salvando le modifiche del file con l'estensione .htm o .html. Per costoro c'è un sito che consente di generare automaticamente il codice html desiderato a seconda del tipo di modifica che si vuole apportare al progetto. Ovviamente queste funzionalità possono andare anche ad integrare la creazione tramite interfaccia grafica, e possono anche risultare molto utili per imparare a usare i principali tag html normalmente utilizzati nella costruzione dei siti web.

Volete provare, per fare un esempio, a costruire una semplicissima pagina web partendo dal Blocco note di Windows? Seguitemi.

Come prima cosa aprite il sito htmlplayground.com cliccando qui e chiudete la finestra popup che appare all'apertura. Ecco come si presenta:



Nel riquadro in alto in alto a sinistra c'è l'elenco dei tag html che possiamo selezionare, mentre negli altri comparirà il relativo codice html. Andremo ora a comporre una semplicissima pagina web con al suo interno una dicitura contenente un link a questo blog. Ad esempio: "Benvenuti nel blog di Andrea Sacchini".

Ogni sistema operativo contempla di default un editor di testo. Se usate Windows potete ad esempio utilizzare il Blocco note - un semplice programma di videoscrittura che consente di creare testi puri privi di formattazione - lanciandolo da questo percorso: start > programmi > accessori > Blocco note. Adesso tornate all'home page del sito htmlplayground.com che avete aperto prima e cliccate sulla lettera "a" che vedete nel riquadro in alto a sinistra. Ecco quello che succede:



Nel riquadro in basso a destra è stato generato il codice html relativo alla frase - presa dal sito stesso come esempio - "Linking to Google". Nel linguaggio html questi tipi di marcatori (a e /a) sono quelli che permettono di collegare una pagina web a un'altra, oppure a un altro file di qualsiasi tipo: una foto, un filmato, un documento, ecc...

A questo punto selezioniamo e copiamo col tasto sinistro del mouse tutto il codice contenuto nel riquadro e incolliamolo nel nostro Blocco note, in modo che alla fine risulti una cosa (apparentemente) incomprensibile tipo questa:



Adesso occorre però modificare la dicitura della frase e il link affinché chi ci clicca sopra venga reindirizzato al mio blog invece che a Google. Per fare questo occorre modificare un paio di righe del codice che avete appena incollato nel Blocco note. Fate in questo modo:

• cancellate la stringa Linking to Google: e sostituitela con Benvenuti nel blog di
• posizionando opportunamente il cursore del mouse, cancellate la dicitura http://www.google.com, compresa tra i virgolettati dopo href=, e sostituitela con http://andreasacchini.blogspot.com lasciando invariato tutto il resto
  
• cancellate la dicitura Google nella riga sottostante sostituendola con Andrea Sacchini
  

Se avete fatto tutto come indicato, il risultato dovrebbe essere questo:



A questo punto avete finito, non vi resta che salvare sul desktop, o dove volete voi, il file dandogli un nome a piacere e un'estensione a scelta tra .htm e .html: ad esempio prova.htm (è importante indicare l'estensione, altrimenti per impostazione predefinita il file viene salvato in .txt mandando a monte tutto).

Vi ritrovate in questo modo sul desktop il vostro file in formato html: non vi resta che cliccarci sopra col tasto destro del mouse e aprirlo col browser che preferite. Ecco come si presenta la pagina (in questo caso con Firefox):


Ecco qua: è sufficiente adesso cliccare sul link creato per entrare nel mio blog.

Questo, ovviamente, non è che un banalissimo esempio (che oltretutto susciterà l'ilarità di chi è già pratico di queste cose) di quello che è possibile fare attraverso l'uso dell'html. Con la stessa procedura applicata a tutti gli altri tag è possibile apportare qualsiasi modifica si desideri alla pagina web, come il colore dello sfondo, la dimensione, il colore e il tipo di font, la definizione dei margini, le tabelle e chi più ne ha più ne metta.

Coi programmi in circolazione oggi non è quasi neanche più necessario conoscere l'html: i processi sono automatizzati e vengono svolti interamente dal programma stesso, previa indicazione di ciò che si vuole da parte dell'utente. Però, a mio avviso, la costruzione di un seppur semplice sito web, quale ad esempio può essere il mio, non può prescindere dalla conoscenza delle basi di questo linguaggio. A questo proposito, penso che uno dei siti più validi per imparare i rudimenti sia html.it.

Beh, ho invogliato o no qualcuno a farsi un sito web?