Tutorial HTML: Struttura base e primi passi con foglio stile CSS

Introduzione Tutorial Html

Benvenuti a tutti coloro interessati nell’apprendere l’Html!

Questo corso è destinato non soltanto ai principianti ma anche ai Senior Webmaster che desiderano rispolverare le basi stesse di questo “Linguaggio di programmazione“.

Ho messo volutamente la parola Linguaggio di programmazione fra virgolette perché in verità l’Html non è un linguaggio di programmazione ma bensì una serie di istruzioni e regole che assemblano il contenuto, denominato più semplicemente Ipertesto da qui l’acronimo (Hiper Text Markup Language)

Una volta che si conoscono i vari pezzi di istruzioni e regole basta semplicemente assemblarli per dare corpo alle nostre pagine web.

Vediamo prima di tutto che cosa serve e come si costruisce una pagina web.
Abbiamo detto che una pagina HTML non è altro che un set di istruzioni aventi come obiettivo la formattazione del testo ed elementi che la compongono.
Questo set di sitruzioni per l’html si chiamano TAGS (elementi) e vengono sempre racchiuse fra parentesi angolari <TAGS>.

Personalmente vi consiglio di procurarvi fin da subito un editor specifico per HTML: in rete se ne trovano di ogni tipo (molti anche gratuiti) sia visuali (dove potete vedere in tempo reale i risultati) sia testuali (puro codice html testuale).
Per poter scrivere html basterà dunque qualunque genere di programma freeware o a pagamento come Notepad, Microsoft Word, Adobe Dreamweaver etc. che possa salvare i dati nel formato ASCII cioè puro testo oppure direttamente nel formato _.html .

Adobe Dreamweaver (versione di prova 30 gg)

BlueGriffon (basato sul motore del celebre browser Firefox)

Intype (sviluppo per il web: HTML, PHP, Perl, CSS, Ruby, etc.)

KompoZer (Editor visuale WYSIWYG)

Creare La tua prima pagina html

Aprite il vostro editor HTML scaricato, qualunque esso sia, anche uno di quelli visuali ed entriamo nella modalità testuale, ovvero in html scritto.
Sul foglio bianco di fronte a noi, inizieremo scrivendo di prassi i seguenti TAG ricordandoci che ogni tag di apertura <TAG> deve essere seguito da un tag di chiusura </TAG> .

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> non c’è alcuna importanza se i tag vengono scritti in maiuscolo o minuscolo, ma io personalmente vi sconsiglio di abituarvi a scrivere tutto minuscolo, cosi se in futuro decideste di passare ad XHTML (dove regola ferrea è scrivere tutto minuscolo) avrete il vantaggio di avere già questa buona abitudine.

La struttura di un documento HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
codice per il server: meta comandi, script, fogli di style, ecc.
  </head>
  <body>
Codice da visualizzare: testo, immagini, moduli, ecc.
  </body>
</html>

Da come potete vedere poco sopra un documento in HTML è composto da un contenitore <HTML> e due sezioni ben distinte: una parte iniziale denominata Testa <HEAD> ed una parte centrale denominata Corpo <BODY>.

In Mezzo ai tag <HEAD> ed </HEAD> vanno inseriti solo quei comandi che inviano informazioni al server come per esempio:

Meta name, Description, title, keywords, script, fogli di stile css e tutto il codice che deve essere letto con una certa priorità.

Ovviamente queste cose le vedremo più avanti in quanto ora ci dobbiamo concentrare sul nostro documento HTML.

Fra il tag <BODY> ed </BODY> va inserito tutto il resto come per esempio: Tabelle, immagini, blocchi di testo, colonne, javascript, etc.

Attenzione: Ricordarsi sempre di chiudere i relativi tag </HEAD> </BODY> </HTML>.

Per il momento nel tag <HEAD> non metteremo nulla, più avanti vi mostrerò cosa inserire al suo interno, quindi in questa prima lezione adopereremo soltanto il tag <BODY>.

Avrete notato la prima riga di codice di cui non abbiamo parlato, si tratta di DOCTYPE. Questa prima riga è chiamata anche “prologo” ed ha il compito di informare il browser che si tratta di un documento html relativo a determinate specifiche dettate dal W3C (organo che regola il web), in questo caso versione 4.01 Transitional, potrebbe anche essere omessa ma diventa indispensabile se vogliamo rispettare le regole ed ottenere un codice valido. Essa predispone gli attuali browser ad una corretta interpretazione del codice contenuto nella pagina; non serve impararla a memoria, se fate uso di un editor specifico per html sarà l’editor stesso a metterla ogni volta che deciderete di creare una nuova pagina.

Copiate e incollate il codice sopra riportato nel vostro editor html preferito e portatevi col cursore all’interno degli elementi <body> … </body>. Trattandosi del corpo della pagina è lì che andremo ad inserire del testo, per farlo useremo l’elemento <p> che significa: paragrafo, scriveremo un qualsiasi testo, per esempio: “Benvenuti in questo viaggio alla scoperta dell’html.”. Facciamo in modo di chiudere l’elemento <p> con il relativo </p> che decreta la fine del paragrafo e se tutto è stato fatto correttamente dovremo avere una struttura come questa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<p>Benvenuti in questo viaggio alla scoperta dell'html.</p>
  </body>
</html>

A questo punto la nostra prima pagina web è pronta: un po’ scarna, è vero… niente colori, niente tipo di font o sfondo. Ha soltanto quella semplice frase ma anche così è a tutti gli effetti una vera e propria pagina web. Per esserlo davvero manca un piccolo passaggio: dovrà essere salvata nel PC in modo corretto, cioè assegnandogli un nome di vostra preferenza ma con estensione obbligatoriamente di tipo .htm o .html.

Se avete usato un editor specifico per html nessun problema: gli date il nome che preferite e sarà l’editor stesso ad aggiungere l’estensione .html trattandosi della pagina iniziale sarebbe meglio chiamarla fin da subito index.html (tutto minuscolo e con html finale) perchè è questo il nome riservato che di solito viene usato per la pagina iniziale.

Lezione Successiva.