FONDAMENTI: 1).La tecnologia HtmL

Il linguaggio HtmL

Per realizzare un documento HTML non è necessario un particolare programma, ma sarà sufficiente un semplice editor di testo come Blocco note di Windows, (io uso Notepad++).
Volendo, si possono costruire documenti HTML, anche senza conoscere nei dettagli questo linguaggio.
In questo caso si dovrà fare ricorso a software ben più complessi di quelli sopra citati, ovvero gli "editor WYSIWYG", acronimo di "What You See Is What You Get", che tradotoo signigica: "quello che vedi è quello che ottieni".
Questi software appartengono alla categoria degli editor visuali e consentono di costruire pagine web operando direttamente con i componenti visuali del documento;
cioè è l'editor stesso, a generare il codice HTML necessario perché l'interprete del codice ovvero il browser, possa leggerlo e riprodurre ciò che vedete. (Ovviamente il codice sorgente prodotto automaticamente dall'applicazione, non sarà mai un codice pulito, uguale a quello che noi avremmo scelto di usare manualmente).

la codifica del linguaggio HtmL è resa pubblica dal World Wide Web Consortium il 24 dicembre 1999, l'ideazione e la nascita di tale linguaggio, è merito di due fisici del CERN di Ginevra: "Tim Berners-Lee" e "Robert Caillau" che nel 1989 ebbero l'idea di creare un sistema (all'inizio usato solo CERN) di "informazione collegata" accessibile attraverso la rete.
W3C (World Wide Web Consortium) è un'organizzazione, nata con l'avvento del Web, che si occupa tra le altre cose di uniformare gli standard web.

HtmL(HyperText Markup Language) è un linguaggio di marcatura(markup) usato per convertire documenti in documenti web(o pagine web).
Lo scopo dell'HtmL è quello di codificare i contenuti specificando: struttura(ossia una gerarchia di elementi), ruolo semantico(conforme al significato) e funzione che ogni oggetto(elementoHtmL) deve avere all'interno della pagina.
Per marcare i suoi elementi e distinguerli dal normale flusso di testo usa la simbologia riportata nella figure che segue:

Tag HtmL

Spesso nella consuetudine "elemento HtmL" e "Tag HtmL" vengono usati come sinonimi.

Elemento, attributo e valore dell'attributo

La codifica del linguaggio HtmL e fondata sul concetto di:
Elemento: Ordina gerarchicamente i contenuti e permette di dare una struttura al documento web; tutti gli elementi supportano degli attributi.
Attributo: Un parametro opzionale che serve a definire alcune proprietà specifiche dell'elemento a cui è associato.
valore dell'attributo: Il valore che l'attributo associato all'elemento esprime.

Struttura Base di un documento web

Tutte le pagine web a livello di funzione, hanno la seguente struttura generale entrata in vigore con l'HtmL5:

  <!DOCTYPE html>
  <html>
   <head>
    <title>Titolo del documento</title>
   </head>
   
   <body>
    Contenuto del documento...
   </body>
  </html>

DESCRIZIONE della Struttura Base e della funzione dei vari elementi
<!DOCTYPE html> è la dichiarazione del tipo di documento.
<html></html> è l'elemento radice di apertura e dichiusura di tutto il documento e tutti gli altri elementi sono contenuti in esso.
<head></head> è l'elemento intestazione contiene informazioni(metadati) importanti sul documento e collegamenti a risorse esterne; il suo contenuto non è mai visualizzato nella grafica del Browser (a parte il titolo del documento visualizzato nella barra del Browser).
<body></body> è l'elemento corpo(contenuto) del documento la sua funzione è quella di mostrare gli oggetti; il suo contenuto è sempre visualizzato nella grafica del Browser.

Elementi di blocco e elementi inline

Una distinzione importante da fare tra gli elementi di una pagina HTML è quella tra i cosidetti "block-elements" (elementi di blocco) e gli "inline-elements" (elementi in linea).
Comprendere la diversità tra il comportamento di questi "due tipi di elementi" è utile e sarà ancora più importante quando si studieranno i fogli di style.
Generalmente gli "elementi di blocco" possono contenere elementi inline e altri elementi di blocco, mentre gli elementi inline possono contenere solo altri elementi inline.
Inoltre gli elementi di blocco generano un riquadro dell'elemento che prende tutto lo spazio orizzontale e da luogo a un interruzione prima e dopo il riquadro dell'elemento.
Gli elementi in-line, come suggerisce la parola stessa, vengono visualizzati sulla riga corrente e non vanno perciò a capo.

Inserire dei commenti

Inserire dei commenti all'interno del codice lo renderà più comprensibile anche a distanza di tempo e faciliterà il compito a chiunque ci dovrà mettere mano.
I commenti sono utili e NON verranno letti dal browser, di conseguenza la pagina non verrà influenzata dalla presenza o meno dei commenti. Questi potranno però essere visualizzati da chiunque attraverso il codice sorgente della pagina.
Nell' HtmL inserire commenti è molto semplice infatti basta usare la seguente sintassi:

Ecco un esempio di commento e di codice indentato:

<html>
  <head><!-- commento, non verrà considerato -->
  </head>
  <body><!-- commento, non verrà considerato -->
  <p> questo invece è il contenuto
      del paragrafo e verrà preso
      in considerazione dalla codifica
  </p>
  </body>
</html>

Indentazione

L'indentazione è la tecnica attraverso cui il codice viene rientrato a mano a mano che si entra in sottoElementiHtmL, come nell'esempi sopra esposti.
Nella seguente guida si cercherà di adottare questa tecnica e si consiglia di utilizzarla in quanto rende il codice più leggibile rispetto ad un incolonnamento verticalmente parallelo.

FONDAMENTI: 2).Intestazione

Intestazione

Nell’intestazione del documento, ossia tra i tag <head>...</head>, possono essere definiti i metadati del documento stesso (un metadato è un dato che, a sua volta, ne descrive un altro): allo scopo si utilizza il tag <meta>. Per esempio, quest’ultimo è utilizzato per definire la codifica dei caratteri in uso nel documento: <meta charset="ISO-8859-1" o "UTF-8"> Pubblicare un testo avendo cura di selezionare la codifica appropriata consente di ridurre l’uso dei caratteri speciali. Il caso più frequente in cui capiterà di dover ricorrere a tali entità sarà dettato dalla necessità di trattare quei caratteri che sono anche parte della sintassi HtmL, come < > &;
Poiché questa dichiarazione deve essere serializzata entro i primi 512 byte del file HTML, è buona abitudine inserire questo elemento subito dopo l’apertura dell’elemento di intestazione, possibilmente prima ancora di indicare il titolo del documento.

Il titolo della pagina

Per far sì che venga visualizzato un titolo del documento nella barra del titolo del browser è sufficiente inserire all'interno dell'intestazione il tag <title>seguito dal titolo della pagina e successivamente dal tag di chiusura </title>.
Ecco un esempio:

 <html>
  <head>
   <title>Inserire il titolo</title>
   </head>
   <body>
     codice
   </body>
 </html

I meta tag

I meta tag sono dei tag speciali che posti nell'intestazione permettono di definire proprietà del documento in modo, ad esempio, da rendere l'indicizzazione da parte dei motori di ricerca più rapida ed efficace. I meta tag non producono alcun tipo di effetto grafico nella visualizzazione della pagina. Essi sono costituiti da due atributi:

nome del meta tag valore del meta tag e questa è la loro sintassi generale:
<meta name="nome_meta_tag" content="valore_meta_tag"> .

Ecco una tabella riassuntiva di alcuni meta tag più utilizzati:

Nome	Valore	Funzione
`charset`	`codifica numerica`	Serve a definire una codifica numerica riconosciuta per una data lingua
`title`	`Titolo del documento`	Serve a definire il titolo del documento
`description`	`Descrizione del sito`	Serve per descrivere il contenuto del sito o della pagina
`creation_date`	`31-03-2015`	Indica la data di creazione del sito o della pagina
`keywords`	`Ogni parola chiave separata da` ,	Serve a dichiarare le parole chiave del sito o della pagina
`copyright`	`Il proprietario del contenuto del sito`	Indica a chi spetta il copyright del contenuto del sito
`author`	`L'autore della pagina`	Indica l'autore della pagina ed eventualmente il suo indirizzo e-mail

Un esempio comune, abbastanza completo:

 <!DOCTYPE html>
 <html lang="it">
  <head>
   <title>Titolo della pagina</title>
   <meta charset="UTF-8">
   <meta name="created_date" content="Marzo 2015">
   <meta name="author" content="ZeroUnoEsseEmme">
   <meta name="description" content="Guide web e di Programmazione">
   <meta name="keywords" content=" parolaChiave01, parolaChiave02,...">
   
   <link rel="stylesheet" href="style.css" />
   <script type="text/javascript" src="script.js"></script>
  </head>
  
  <body>
   contenuto pagina
  </body>
 </html>

FONDAMENTI: 3).Struttura

Il web è in costante evoluzione

HtmL4 è una specifica ufficiale accettata ormai da molti anni.
Per rendere possibile la realizzazione di siti web più interattivi e coinvolgenti HtmL5 introduce e migliora una vasta gamma di funzionalità:
inclusi nuovi controlli per i form, nuove API, elementi per il multimedia, migliorando sia la struttura che la semantica.

Nota: Il lavoro della nuova specifica HtmL5 è divenuta una Raccomandazione del W3C a Ottobre del 2014.
È stata portata avanti da uno sforzo comune tra il W3C e il WHATWG, con la collaborazione di rappresentanti dei quattro principali browser e delle loro aziende: Apple, Mozilla, Opera e Microsoft.

Prassi comune

La maggior parte delle pagine scritte in HtmL4 contiene una varietà di elementi strutturali comuni, come header, footer, ed altro; ed è prassi piuttosto diffusa definirli nel markup usando elementi <div> e assegnando a ciascuno un id o una classe descrittiva come nella figura che segue:

Struttura div

L'uso di elementi div è molto diffuso perché nella vecchia versione HtmL4 mancava dei necessari elementi semantici per descrivere e definire queste parti in maniera più specifica.

HtmL5 introduce un set di nuovi elementi che rendono più semplice la definizione della struttura di una pagina e per rappresentare ciascuna di queste diverse sezioni con elementi appropriati come rappresentato nella figura che segue:

Struttura div

FONDAMENTI: 4).Elementi semantici

Valore semantico della struttura

Identificando le varie regioni della pagina attraverso l'uso di specifici elementi il cui nome è in strettissima attinenza con il proprio contenuto si definisce una struttura con significato semantico e un codice pulito e più comprensibile.

Elenco degli elementi con significato semantico

Ecco come vengono definiti dal W3C:

<hgroup> L'elemento hgroup rappresenta l'intestazione di una sezione. L'elemento serve a raggruppare un set di elementi h1-h2-h3-h4-h5-h6 quando l'intestazione ha più livelli, come sottotitoli, titoli alternativi o slogan.

<header> L'elemento header rappresenta un gruppo di strumenti d'ausilio per l'introduzione o la navigazione. L'elemento header è pensato per contenere l'intestazione della sezione [...], sebbene non sia obbligatorio utilizzarlo in questo modo. Questo elemento può essere utilizzato anche per racchiudere l'indice di una sezione, un modulo di ricerca o un logo pertinente.

<nav> L'elemento nav rappresenta unna sezione di una pagina che permette il collegamento ad altre pagine o ad altre parti di una pagina:
una sezione contenente collegamenti di navigazione.
Non tutti i gruppi di collegamenti su una pagina devono appartenere a un elemento nav:
solo le sezioni che costituiscono i blocchi di navigazione principale sono adatte all'elemento

<section> L'elemento section rappresenta una sezione generica di un documento o di un'applicazione. in questo contesto, una sezione è un raggruppamento tematico di contenuti, di solito accompagnato da un titolo.
Esempi di sezioni potrebbero essere i capitoli, le varie schede di una finestra di dialogo o le sezioni numerate di una tesi.
Anche la home page di un sito Web potrebbe essere divisa in più sezioni: una per l'introduzione, una per le ultime notizie e una per le informazioni di contatto.

<article> l'elemento article rappresenta una composizione finita in sé stessa presente in un documento, una pagina, un'applicazione o un sito e che, in linea di principio, è distribuibile o riutilizzabile in modo indipendente, per esempio nei feed.
'Potrebbe trattarsi di un post in un forum, di un articolo in una rivista o in un quotidiano, di un post di blog, di un commento inviato da un utente, di un widget o di un gadget interattivo o di qualsiasi altro contenuto indipendente.
Quando gli elementi article sono annidati, gli elementi interni rappresentano articoli correlati al contenuto dell'elemento article esterno.
'Per esempio, un post di blog in un sito che accetta commenti inviati dagli utenti potrebbe rappresentare i commenti come elementi article annidati nell'elemento article che costituisce il post di blog.

<aside> Questo elemento, il cui nome significa letteralmente di lato, concettualmente somiglia a quei riquadri nei libri che contengono un approfondimento del contenuto principale, dal quale comunque risultano separati.
Definizione del W3C:
L'elemento aside rappresenta una sezione della pagina che è costituita da contenuto tangenzialmente correlato al contenuto intorno all'elemento aside e che può essere considerato separato da tale contenuto.
Nella tipografia questo tipo di contenuto è spesso rappresentato da un riquadro laterale. L'elemento può essere utilizzato per effetti tipografici come citazioni o riquadri, per la pubblicità, per gruppi di elementi nav e per altri contenuti separati dal contenuto principale della pagina.

<footer> L'elemento footer rappresenta il piè di pagina del più vicino contenuto padre che definisce una sezione o del più vicino elemento radice che crea una sezione.
Di norma, un piè di pagina contiene informazioni sulla sezione, per esempio l'autore della stessa, collegamenti a documenti correlati, informazioni di copyright e così via.
L'elemento footer non è un contenuto che divide in sezioni; non inizia una nuova sezione.

Esempio completo di struttura semantica

 <!DOCTYPE html>
 <html>
  <head>
   <title>...</title>
  </head>
  <body>
   <header>
    <hgroup>
      <h1>Intestazione pagina(o Sito)</h1>
      <h2>sottoTitolo</h2>
    </hgroup>
    <nav>
      <h1>Navigazione</h1>
      <ul>
        <li><a href="#">link01</a></li>
        <li><a href="#">link02</a></li>
        <li><a href="#">link01</a></li>
      </ul>
    </nav>
   </header>	
   <aside>
     [Approfondimento...]                  
   </aside>
   <section>
    <h1>titolo sezione</h1>
    <article>
     <h2>titoloArticolo</h2>
     <p>
       [...]
     </p>
    </article>
    <article>
     <h2>titoloArticolo</h2>
     <p>
      [...]
     </p>        
     </article>                    
   </section>
    <footer>
     <hr><small>pieDiPagina Pagina</small><hr>
   </footer>
  </body>
 </html>

Risultato...Esempio completo di struttura semantica

...

Intestazione pagina(o Sito)

sottoTitolo

titolo sezione

titoloArticolo

[...]

titoloArticolo

[...]