COS'È L'HTML?

Benvenuti su questa rubrica, se siete arrivati fin qui, e non per sbaglio, significa che siete interessati a muovere i primi passi in HTML, ovvero il linguaggio base che da vita alla rete Internet.
Su questa rubrica è possibile apprendere passo dopo passo, lezione dopo lezione, tutto ciò che serve per creare una propria pagina web, e perché no, un vero e proprio sito web!

Per stampare le singole pagine di questa rubrica basta un clic sull'immagine della stampante che si trova a fine pagina oppure dal menù file del vostro browser di navigazione dopo aver selezionato questo riquadro (frame).

Bene, dopo questa breve ma doverosa premessa possiamo iniziare; vediamo cosa serve e come si costruisce una pagina web.

Una pagina web è una sorta di ipertesto, cioè testo apparentemente "normale" generato da un editor, cioè uno di quei programmi che permettono di scrivere il codice,  a volte lo stesso che  si adopera per scrivere le normali lettere; la differenza consiste nello scrivere "parole"  particolari che diventano vere e proprie istruzioni per il browser di navigazioni e sono chiamate <TAGS> (elementi), racchiusi fra parentesi angolari < >, particolarità che ne consente poi la corretta interpretazione da parte del browser. Cos'è il browser?
E' quel programma che serve per navigare la rete, lo stesso che stai adoperando in questo momento per leggere quello che io ho scritto con il linguaggio HTML, questa sigla è ormai divenuta sinonimo di pagina web, il suo significato deriva dalle iniziali di: Hyper Text Markup Language. Senza html non potresti nemmeno leggere questa pagina.

Non c'è nulla di particolarmente difficile, non serve avere alcuna precedente esperienza di programmazione; devi semplicemente seguire le spiegazioni con una certa attenzione e poi provare... provare, e riprovare ed alla fine il risultato é garantito.

Come ho appena detto, non si tratta di un linguaggio vero e proprio di programmazione per il quale é di solito  richiesta una certa preparazione di base, si tratta molto più semplicemente di una combinazione di tags (elementi) molto semplici da inserire e direi abbastanza facili da ricordare e soprattutto con pochissime regole da rispettare.

Fare delle buone pagine web non è per niente difficile, i problemi potrebbero nascere quando non ci si accontenta più di semplici pagine o quando queste debbano produrre "effetti speciali", ma questo lo vedremo in seguito; una panoramica più completa su quelli che sono gli elementi di html è possibile averla consultando la mia guida HTML dedicata sempre ai principianti,  anch'essa di facile consultazione con possibilità di essere scaricata in formato compresso (zip) per essere stampata o consultata comodamente off-line.

Ci siamo dilungati fin troppo, vediamo cosa serve e quali sono gli strumenti necessari per creare la nostra prima pagina web. Abbiamo detto un editor, cioè uno di quei programmi che si adoperano per scrivere testi, il wordpad o il blocco notes che di solito si trovano a corredo di windows, tanto per fare un esempio, potrebbero andare bene, ma anche qualsiasi altro elaboratore di testi potrebbe fare al caso nostro; unica raccomandazione: ricordarsi sempre di salvare il tutto in formato ASCII, cioè puro testo senza aggiunta di formattazioni particolari. Alcuni di questi programmi infatti, word di microsoft per citarne uno, aggiungono dei caratteri particolari che soltanto loro riescono poi a riconoscere ed interpretare, questi caratteri non vanno certo d'accordo con il codice html e relative  pagine web. Non lasciatevi ingannare dal fatto che word possa esportare in HTML, lasciate perdere, se proprio volete adoperare word e seguire questo corso, salvate in ascii e rinominate poi il file così salvato in htm o html.

Personalmente vi consiglio vivamente di procurarvi un editor specifico per HTML, visto poi che se ne trovano di potenti ed anche gratuiti, non vedo perché se ne dovrebbe fare a meno. Dovendo parlare di editor HTML, due sono le categorie in cui si suddividono: visuali e testuali.

Quelli visuali sono sicuramente molto più semplici da adoperare, assomigliano a dei programmi di grafica, è sufficiente trascinare al loro interno testi ed immagini per avere un'impaginazione più che soddisfacente, se avete deciso per quelli, potete smettere di  leggere questa mia rubrica,.non vi servirà  a molto infatti, arrivederci, sono però sicuro che ci rivedremo presto ... :-)
Presuntuoso?
No, lo so per esperienza, quella che voi stessi mi avete permesso di fare in tutti questi anni.

Gli editors testuali richiedono  invece da parte di chi li adopera una minima conoscenza di base, potrebbero sembrare più dispendiosi in termini di impegno, ma alla lunga si rivelano invece un autentico investimento. Consentono di fare cose che editors visuali non permetterebbero mai e danno la possibilità di avere il controllo assoluto su ogni parte del codice, anche di questo avremo modo di parlare meglio quando torneremo in seguito sull'argomento.

E con questa le premesse sono davvero finite, possiamo finalmente iniziare a fare qualcosa di concreto...

Aprite il vostro editor preferito, qualunque esso sia, anche uno di quelli visuali se ha la possibilità di andare in modalità testo ovvero in  html.

I TAGS, o elementi, che compongono HTML devono essere racchiusi fra parentesi angolari <queste>

Si tratta di parole chiave, termini in lingua inglese riservati. L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra laterale / contenuta sempre all'interno delle parentesi angolari.

L'inizio di un documento HTML avrà come elemento (tag) iniziale: <HTML> e come elemento (tag) finale </html> nessuna importanza se scritti in maiuscolo o minuscolo, tutto ciò che sarà contenuto all'interno di questi due elementi (tags) sarà interpretato dal browser come codice HTML.

Difficile ?
No! Direi proprio di no :-)

Un documento HTML è composto da due sezioni ben distinte: una  parte iniziale denominata testa <HEAD> ed una centrale denominata corpo <BODY>

Nella testa (head) vanno messi quei comandi che inviano informazioni al server (lo spazio web che si trova in rete) o quel codice che deve essere letto con una certa priorità: script, fogli di style, ecc. ecc.
Nel corpo (body) tutto il resto. Anche questi elementi, necessitano del relativo elemento di chiusura: </head> e </body> Riassumendo, una struttura HTML tipo potrebbe essere questa:

<html>
<head>
codice per il server, scritps, fogli di style.
</head>
<body>
codice da visualizzare come documento: testo ed immagini
</body>
</html>

Per il momento all'interno di <Head> non metteremo nulla, si vedrà più avanti cosa inserire, adopereremo quindi soltanto la zona <body>.

Col vostro editor create la struttura sopra e portatevi col cursore all'interno degli elementi (tags) <body> ... </body>; Inseriremo del testo, per cui lo faremo precedere dall'elemento <p> che significa: paragrafo, andremo a scrivere un qualsiasi testo: "questa è la mia prima pagina web" per esempio, facciamo in modo di chiudere anche l'elemento <p> con il relativo </p>. Se tutto è stato fatto correttamente dovremo avere una struttura di questo genere:

<html>
<head>
</head>
<body>
<p> Questa è la mia prima pagina web </p>
</body>
</html>

Non importa come avete disposto le frasi del testo, potete lasciare spazi o ritornare a capo quante volte volete, nessuna importanza; il browser ignorerà il vostro modo di scrivere limitandosi a leggere ed interpretare soltanto gli elementi validi di html. (più avanti si vedrà come lasciare spazi e come andare a capo)

A questo punto non resta che salvare il tutto. Se il vostro editor non è specifico per html, fate in modo di salvare in formato ascii, cioè testo puro. Assegnategli un nome: quello che volete, e salvatelo nel vostro PC anche se aarebbe meglio chiamare la pagina iniziale del sito col nome index.html (tutto minuscolo e con html finale) perchè è questo il nome esatto che di solito il server in rete va a ricercare come pagina iniziale del sito.

Se non avete un editor che salva direttamente in html con molta probabilità il vostro file avrà un estensione di tipo .txt, ovvio direte voi, visto che è stato scritto con un normale editor per testi. Rinominate questo file in modo che abbia come estensione htm o html altrimenti il browser non riuscirà ad interpretarlo in modo corretto.

A proposito di questa operazione di rinomina file dovrei fare alcune precisazioni: l'operazione di per se è molto semplice ma chi adopera Windows potrebbe non vedere l'estensione finale del file appena salvato, in questo caso rinominarlo servirebbe a poco dal momento che windows aggiungerebbe si html al nome appena assegnato, lasciando però di fatto il file in formato txt.

Mi rendo conto che non sia molto semplice capire che cosa ho appena detto se siete principianti  in senso generale, per chi avesse problemi in questo tipo vi rimando ad un esempio che credo possa chiarire meglio.
Consapevole che se avessimo adoperato un editor visuale  non ci sarebbe stato bisogno di niente altro che non fosse stato scrivere: questa è la mia prima pagina web e salvare...

Preferivate una cosa fatta a quella maniera ?
Se si, avete sbagliato rubrica, questa è infatti dedicata a coloro i quali vogliono sapere come fare le pagine web e non come farle fare ai vari  editors visuali :-))

Per essere la prima lezione introduttiva, credo possa bastare, esercitatevi, soltanto dopo aver compreso questo meccanismo ed aver acquisito quel un minimo di familiarità con la creazione ed il salvataggio dei files in formato html potrete passate alle lezioni successive.
 
  Indice lezioni