Sviluppo Web
HTML Cap.1: Impariamo insieme i principi fondamentali dell’HTML, vedremo che cosa è, a cosa serve e come trattarlo.
Ciao! In questo articolo impareremo insieme i principi fondamentali dell’HTML, vedremo che cosa è, a cosa serve e come trattarlo.
Innanzitutto HTML è un acronimo che sta per HyperText Markup Language, ovvero linguaggio a marcatori per ipertesti. E quindi? Quindi significa che non abbiamo a che fare con un vero e proprio linguaggio di programmazione, ma con un oggetto molto più semplice da imparare: uno strumento di marcatura che andrà a indicare alle varie componenti della pagina chi sono e cosa fanno.
I TAG
Più o meno come funziona il sistema dei TAG di Facebook: cosa fai quando vuoi assegnare un nome e un cognome (quindi un’identità) a un amico che compare in una foto? Lo tagghi. Ecco, con l’HTML farai la stessa identica cosa: taggherai le varie parti della pagina per dire loro: "Tu sei questo e quindi hai questa funzione, tu sei quell’altro e quindi hai quell’altra funzione.”
In questo modo con l’HTML andremo a definire esclusivamente la struttura della pagina web, quindi definiremo la griglia che andrà a contenete gli elementi del sito.
Tutto ciò che, invece, riguarda il layout, i formati, come devono comportarsi le pagine dal punto di vista del formato, sarà a carico del migliore amico dell’HTML: il codice CSS (che affronteremo più avanti).
Come riusciamo a definire la struttura di una pagina HTML? Attraverso l’utilizzo dei TAG (come abbiamo visto prima) che non sono altro che parole scritte all’interno di due parentesi uncinate, il simbolo del minore < e il simbolo del maggiore >:
<nomeTag>
Cosa troviamo fra l’apertura e la chiusura di un tag? Sarà possibile trovare dei testi e/o altri TAG con funzioni diverse. Per permettere questo, ogni TAG aperto, andrà poi chiuso, semplicemente ridigitanto il nome del TAG fra le parentesi uncinate e aggiungendo lo slash dopo il simbolo del minore </nomeTag>
Facciamo subito un esempio di apertura e chiusura di un TAG utilizzando l’elemento principale del Web: il TAG HTML:
<html> altri tag o testo </html>
Esistono delle eccezioni, i cosiddetti TAG empty (vuoti), che nel momento in cui vengono aperti, sono contemporaneamente anche chiusi; sono etichette isolate, come il TAG che useremo per andare a capo: </br>.
Come puoi vedere, questo TAG, nel momento in cui viene dichiarato (e quindi aperto) viene immediatamente anche chiuso.
L’ORDINE DI SCRITTURA IN HTML
Una pagina web sarà composta da più TAG, ma come si definisce il loro ordine di scrittura?
Il principio è semplice: quello delle matriosche; il più esterno conterrà quello immediatamente interno che a sua volta ne conterrà un altro ecc… ciò non toglie che sarà possibile (nonché molto probabile) avere due o più tag nello stesso contenitore.
A questo punto possiamo fare un esempio pratico definendo le parti fondamentali di una pagina web (e che troverai in QUALSIASI pagina web) costruite come un essere umano:
- una testa <head>
- un nome <title>
- un corpo <body>
Come puoi vedere il TAG principale è html che al suo interno contiene la testa head e il corpo body.
La testa, a sua volta, contiene il titolo della pagina: title.
Il tag title accoglie un semplice testo, che non sarà altro che il titolo della pagina.
N.B:
uno degli errori principali di un neofita è aprire un tag per poi dimenticarsi di chiuderlo; un consiglio che ti do è di aprire il tag per poi chiuderlo immediatamente.
Apro il tag, chiudo il tag … metto la cera e tolgo la cera 😆
Nel prossimo articolo vedremo come arricchire i nostri TAG con attributi e proprietà. Nel frattempo ti auguro un Buono studio!
Non vedi l’ora di approfondire l’argomento? Iscriviti al corso certificato di Web Design & Development di SinerVis Academy!
