HTML: Sintassi e struttura

Prima di tutto vi invito a prendere appunti cartacei perché scrivere aiuta ad imparare.

Inizierei col dire che html non è un vero e proprio linguaggio di programmazione. Per definizione (Hyper Text Markup language) è un linguaggio con il quale "marchiare" degli elementi e assegnare loro delle caratteristiche per creare un ipertesto. Html è il linguaggio base delle pagine web.

Cominciamo subito:

Intanto dobbiamo comprendere che la nostra pagina web somiglia ad un umano: ha un corpo e una vita.

Il corpo è costituito da scheletro,muscoli e pelle. Lo scheletro verrà costruito con HTML e la pelle con CSS(tratteremo questo argomento più tardi).

Partiamo quindi a costruire la pagina dallo scheletro.

Prima di iniziare a programmare, dobbiamo avere delle basi sintattiche del linguaggio.

Intanto HTML è "case insensitive",cioè non fa differenza tra lettere minuscole e maiuscole, nè tra "a capo" e "di seguito".

Vedremo che gli elementi che costituiranno la pagina, verrano impartiti alla macchina tramite un modo speciale di scriverli ovvero: il TAG. Ogni tag è formato da "<" "nomedeltag" ">" (senza le virgolette).

Per capirci meglio il tag "<div>"

è composto, come vedete, da due parentesi acute (<;>) e dal nome del tag ("div").

Tra il nome del tag e la parentesi acuta ci possono essere alcune proprietà, che, però, per adesso non consideriamo.

Come vedremo, esistono 2 tipi di tag: i tag contenitori e i tag non contenitori. I tag contenitori sono dei tag che, appunto, servono per contenere degli elementi e, a seconda del tag in questione (e a seconda delle proprietà css attribuite ad esso) trasmettono determinate caratteristiche agli elementi contenuti. Meglio fare un esempio per essere più chiari:

il tag "<p>" è un tag che serve ad inserire testo nella pagina. Il tag"<p>" ha la caratteristica di creare, prima e dopo il testo contenuto, un' interlinea (una sottile riga vuota), quindi il testo (che è l'elemento contenuto dentro a <p>) avrà questa caratteristica.
I tag non contenitori servono per inserire direttamente un elemento nella pagina, quindi, mentre il  "<p>" non indicava direttamente un testo(perchè a volte dentro a p si possono inserire anche altri elementi), il tag <img> indica un'immagine (infatti il tag <img> non contiene nulla).

Per quanto riguarda i tag contenitori, si è rivelata la necessità di "delimitare" il contenuto del tag, quindi ogni tag contenitore avrà il tag di apertura e il tag di chiusura. Ciò che sta tra i due, è il contenuto del tag contenitore. Il tag di apertura è  quello che abbiamo conosciuto, quindi "<nome>" , quello di chiusura è così formato: "</nome>".
 Come vedete è uguale a quello di apertura, ma c'è uno slash prima del nome del tag. Facciamo un esempio: <p>Testo contenuto nel tag</p>

Voglio aggiungere anche che un tag contenitore può, contenere un altro tag, che, se è contenitore, può, a sua volta, contenere altri tag. Esempio:<p>Testo<p>Altro testo</p></p>

Ovviamente un tag di chiusura farà riferimento al primo tag di apertura (con lo stesso nome)-ancora aperto- che incontra prima di lui. Infatti il </p> non chiude <p>, perchè andando a ritroso trova <p> che ha lo stesso nome (p) e non è ancora stato chiuso. Anche partendo da </p>, andando indietro, si trova <p>, ma è già stato chiuso. Possiamo dire, quindi, che i tag si chiudono dall'interno della riga, verso l'esterno.

Ogni cosa che noi  scriviamo in un documento html verrà rappresentato poi nel browser, ma c'è la possibilità di scrivere degli appunti nel nostro editor di testo senza che questi vengano mostrati nel browser. Questo strumento si chiama commento e si formula così: /*commento*/.  Così facendo la parola commento non si vedrà nella pagina web.

Per adesso ci fermiamo qui. Se ci saranno aggiornamenti sulla sintassi li aggiungerò quì.

A presto!