Il sito per imparare gratuitamente a fare pagine Web

Primi passi in HTML con Style

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Primi Passi in HTML con Style - Ver. 1.3.6

 

Muovere i primi passi in HTML con fogli di style

Benvenuti su questa rubrica, se siete arrivati fin qui, e non per caso, significa che siete interessati a muovere i primi passi in HTML, ovvero il linguaggio base che dÓ vita a tutte le pagine web della rete Internet.

Questo non Ŕ un aggiornamento alla precedente rubrica Primi Passi ma la sua naturale evoluzione, infatti i tempi sono cambiati e non Ŕ pi¨ pensabile di gestire la propria pagina web senza fare uso dei fogli di style o CSS, il tutto nel rispetto delle regole dettate dal W3C (organo che si occupa dello sviluppo tecnico e degli standard per l'evoluzione del Web). Seguendo questa versione potrete dire che il vostro sito Ŕ attuale perchŔ certificato nel codice usato che risulterÓ corrispondente alle attuali regole di html 4.01. Questa guida si rivolge al principiante che non conosce nulla della materia, sono volutamente tralasciate alcune cose al solo scopo di evitare di confondere il neofita. Una volta capito il meccanismo si potrÓ approfondire l'argomento seguendo le altre due guide di Web-Link: Guida HTML e Guida CSS.

Su questa rubrica è possibile apprendere passo dopo passo, lezione dopo lezione, tutto quello che serve per creare una propria pagina web o anche un vero e proprio sito web!

Volendo contribuire Ŕ possibile scaricare la guida anche in formato compresso .zip (E-book o PDF) per poterla stampare su carta o consultare a video comodamente off-line, cioè scollegati dalla rete, è sufficiente cliccare su questo link: Scarica Primi Passi Html con Style scarica la guida Primi passi HTML con style

Attenzione! eventuali ultime modifiche potrebbero non essere state ancora inserite in questa versione gratuita on line (prioritÓ alla versione zip), questa on line viene aggiornata ad intervalli prestabiliti o quando ci siano modifiche di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro svolto che sarÓ sempre e solo a beneficio di tutti quanti voi.

Useremo dunque soltanto il minimo indispensabile, cosý facendo sarÓ tutto pi¨ semplice per chi si avvicina per la prima volta a questo sistema di "programmazione" ho messo fra virgolette la parola programmazione perchŔ non si tratta di programmazione vera e propria ma pi¨ semplicemente di un assemblaggio di istruzioni, una volta che si conoscono i vari pezzi Ŕ sufficiente assemblarli per dare corpo alle nostre pagine web. Pochi ma essenziali comandi per un buon risultato da ottenere subito. Chi volesse potrÓ approfondire poi dai links riportati sopra relativi alle guide: HTML e CSS.

Vediamo prima di tutto che cosa serve e come si costruisce una pagina web. Una pagina web è una sorta di ipertesto, cioè testo apparentemente "normale" generato da un normalissimo editor per testi, a volte Ŕ lo stesso che si adopera per scrivere le normali lettere. La differenza consiste nello scrivere "parole" riservate che diventano vere e proprie istruzioni per il browser (programma di navigazione) e che sono chiamate <tags> (elementi), si distinguono perchŔ racchiuse fra parentesi angolari < >, particolaritÓ che ne consente la corretta interpretazione da parte del browser. Cos'è il browser?
E' quel programma che serve per navigare la rete, lo stesso che state adoperando voi in questo momento per leggere questa pagina che fa uso proprio del linguaggio HTML, questa sigla è ormai sinonimo di WEB, il suo significato deriva dalle iniziali della frase in lingua inglese: Hyper Text Markup Language. Senza html non sarebbe possibile leggere questo che sto scrivendo.

Non c'è nulla di particolarmente difficile e non serve avere alcuna esperienza di programmazione; non si tratta infatti di programmare ma come ho detto sopra di assemblare delle istruzioni tags (elementi) predefinite e molto semplici da gestire, direi anche abbastanza facili da ricordare ma soprattutto con pochissime regole da rispettare, e poi provare... provare e riprovare fino ad ottenere il risultato voluto che, vi assicuro, é garantito per tutti.

Fare delle buone pagine web non è per niente difficile, i problemi possono nascere quando non bastano pi¨ delle semplici pagine statiche o quando queste debbano produrre risultati elaborati, ma avremo modo di parlarne in seguito. Al momento Ŕ sufficiente imparare regole e meccanismi, si potranno poi assemblare tutti gli altri elementi che in questa rubrica non saranno trattati per non confondere il principiante ma che sono presenti sulla Guida HTML di Web-Link.

Vediamo in concreto 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 word pad per esempio, o il blocco notes che di solito si trovano a corredo di windows, possono 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 che servono per elaborare testi, word di microsoft per citarne uno, aggiungono dei caratteri particolari che soltanto loro riescono poi a riconoscere ed interpretare, questi caratteri non vanno d'accordo con il codice html. Non lasciatevi ingannare dal fatto che word nelle sue opzioni di salvataggio ha la voce per esportare in HTML, lasciate perdere, se proprio volete adoperare word per seguire questo corso, salvate in ascii (txt) e rinominate poi il file così salvato xxx.txt in xxx.htm o xxx.html (dove xxx sarÓ sostituito dal nome che voi avrete scelto di assegnare al vostro documento).

Personalmente vi consiglio di procurarvi fin da subito un editor specifico per HTML, in rete se ne trovano di ogni tipo, molti anche gratuiti, per cui non vedo perché se ne dovrebbe fare a meno. Dovendo parlare di editor HTML, sono due 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 rubrica, non vi servirà a nulla, arrivederci, sono sicuro che ci rivedremo presto.
Presuntuoso?
No, lo so per esperienza, quella che voi stessi mi avete permesso di acquisire in tutti questi anni.

Gli editors testuali richiedono da parte di chi li adopera una minima conoscenza di base del linguaggio da adoperare, ecco il motivo di questa rubrica. Potrebbero sembrare più dispendiosi e lo sono in termini di impegno ma alla lunga si rivelano invece un autentico investimento. Consentono di fare cose che editors visuali non riusciranno mai a fare ed offrono la possibilità di avere il controllo assoluto di ogni parte del codice, anche di questo avremo modo di parlare meglio quando torneremo in seguito sull'argomento.

Bene, le premesse sono finite, possiamo finalmente iniziare a fare qualcosa di concreto... Aprite il vostro editor preferito, qualunque esso sia, anche uno di quelli visuali a patto per˛ che abbia la possibilità di commutarsi in modalità testuale, ovvero in html.

Sul foglio bianco inseriremo i TAGS, o elementi, che compongono HTML e che devono essere racchiusi fra parentesi angolari <queste>

Abbiamo detto che si tratta di parole chiave, termini riservati scritti in lingua inglese. Un elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra / 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; consiglio per˛ di abituarsi fin da subito a scrivere tutto in minuscolo, chi infatti decidesse poi di passare ad xhtml avrÓ il vantaggio di avere giÓ questa buona abitudine che in xhtml Ŕ una regola ferrea. Tutto ciò che sarà contenuto all'interno di questi due elementi (tags) sarà interpretato dal browser come codice HTML.

Vi sembra difficile ?
Direi proprio di no.

Nella prossima lezione vedremo la struttura della pagina html.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi