HTML - 1 - Hello world! (e altra roba...)


Eccomi! Sono tornato! Lo so, vi sono mancato, ammettetelo... 😉 Cari miei fan, purtroppo sono stato molto impegnato ultimamente (ho dovuto organizzare e gestire la campagna presidenziale di Obama, le primarie del PD, la corsa degli sgusci su Tatooine, ecc...), ma adesso sono di nuovo qui! Yuhuuuuuuu! Quindi, torniamo a fare cose serie.

Nell'ultimo articolo vi avevo accennato alcune nozioni di base riguardanti la programmazione web per la creazione di siti internet: adesso invece si inizia ad entrare più nel dettaglio.

La base di partenza è l'HTML: HyperText Markup Language, cioè, il linguaggio con cui sono fatte le pagine web. Vediamo un po' più da vicino alcuni aspetti di questo linguaggio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titolo</title>
</head>

<body>
</body>
</html>

Questa è già una pagina html corretta: ovviamente è una pagina bianca (lo potete intuire dal fatto che dentro il tag body non c'è nulla), con la scritta "Titolo" sulla scheda in alto del browser (rigo 5, tag title).
Il primo rigo lasciamolo perdere, non ci interessa, mentre possiamo già vedere che la nostra pagina deve stare dentro il tag html, da aprire in cima e chiudere in fondo: al suo interno vengono definite due macro-aree: head e body.

Dentro il tag head ci vanno inserite alcune informazioni relative alla pagina: abbiamo già visto il tag title, mentre i tag meta hanno svariate funzioni, come indicare keywords e descrizioni che aiutano i motori di ricerca a classificare il sito; nel nostro esempio, viene definito il tipo di contenuto ("text/html") e il set di caratteri utilizzati ("utf-8"). Notiamo già una piccola differenza di sintassi fra tag: a differenza di head, body, ecc... che hanno bisogno sia dell'apertura che della chiusura (head /head, body /body), il tag meta si chiude subito (meta /), in quanto non dobbiamo scrivere nulla che sia rinchiuso dentro il tag (vedremo che ci sono altri tag con questa caratteristica, tipo img /).
Altri elementi che vanno all'interno di head sono i link /, gli script e gli style (in realtà script e style possono stare anche fuori da head, ma per un "buon codice", pulito e ordinato, si cerca se possibile di evitare questa opportunità).
I link / servono per collegare ed includere alla nostra pagina web altre pagine di codice (nel tag infatti si scrive l'indirizzo/il percorso di dove si trova tale pagina), soprattutto i file css per lo stile della pagina; il tag script invece potete ben capire che serve per indicare i file con gli script da includere, oppure si può direttamente scrivere dentro il tag (ricordiamo che è del tipo apertura/chiusura) il nostro codice script da utilizzare, senza fare nessun indirizzamento; dentro il tag style invece ci scriviamo altre regole di stile (quindi è come se fosse un file css) che magari vogliamo utilizzare solo per la pagina in questione.
Mi rendo conto che questa roba è noiosa, però è fondamentale per non avere dubbi e problemi in futuro.

Quindi a grandi linee dentro head ci vanno queste cose appena elencate, mentre dentro body ci va tutto quello che vogliamo far comparire all'interno della nostra pagina.
Siamo arrivati quindi all'obiettivo della lezione di oggi: creare il nostro "Hello World!".
Facilissimo (ricordate sempre di salvare il nostro file di testo con l'estensione .html, e poi di aprirlo con il vostro browser):

[...]
<body>
Hello World!
</body>
[...]

Banale, no? In realtà ogni elemento della nostra pagina dovrebbe stare dentro un tag contenitore, tipo div o p o span:

[...]
<body>
<div>Hello World!</div>
//oppure
<p>Hello World!</p>
//oppure
<span>Hello World!</span>
</body>
[...]

Questo perchè è molto utile avere ogni elemento ben inquadrato, racchiuso dentro qualcosa, così da aver più possibilità di gestione dello stesso attraverso i fogli di stile e gli script.

Provate a fare dei tentativi anche da soli, usando i seguenti tag che, più o meno, possono tutti contenere altri tag e a loro volta possono essere contenuti! Cercate di capirne le differenze! 😉

<h1></h1>, <h2></h2>, ... //Fino a <h6></h6>
<div></div>
<p></p>
<span></span>
<em></em>
<b></b>
<u></u>
<strong></strong>
<a href="#"></a>
...e tanti altri

Bella gente, alla prossima! Come al solito, se avete dubbi commentate!

Paolo Gerini

Umpa Lumpa della scienza, studente a tempo perso e ingegnere solo quando capita. Appassionato di sport e di musica (suona il pianoforte per far colpo sulle tipe), sembra anche che ogni tanto lavori ma pare più una leggenda.

HTML - 1 - Hello world! (e altra roba...) ultima modifica: 2012-12-23T19:32:50+00:00 da Paolo Gerini


Advertisment ad adsense adlogger