GG-CREATOR - Nozioni base sulla programmazione front-end

HTML & CSS

In questo lungo articolo andrò a spiegare innanzitutto la definizione dei linguaggi di programmazione front-end HTML e CSS, dopodichè andrò ad analizzare i famigerati tags HTML e le proprietà CSS, con lo scopo di aiutare chi ha qualche dubbio a riguardo, chi magari si è dimenticato qualcosa o chi vorrebbe imparare. Piccola nota a riguardo, l'argomento è enormemente vasto e per racchiudere tutto bisognerebbe scriverci un libro, tuttavia questo articolo fungerà da riassunto cercando però di essere il più completo e descrittivo possibile per gli argomenti che tratta. Qualora volessi approfondire di più l'argomento posso solo consigliare di usare la curiosità e sfruttare il web per soddisfare la sete di conoscenza.

Cominciamo!

Cos'è l'HTML?

L'HTML5 è un linguaggio di markup per la strutturazione delle pagine, colonna portante di tutti i siti sparsi per il web. L'acronimo sta per Hyper Text Markup Language e la versione attuale è appunto la 5.0. Tuttavia sta per essere rilasciata la versione 6.0 che, così si dice, andrà a rimpiazzare l'utilizzo di Javascript, nonostante io abbia seri dubbi a riguardo.

Template di base

Ogni documento HTML deve rigorosamente iniziare con la seguente sintassi (inserita in qualunque editor di testo):

<!doctype html>

<head>

<title>Ciao Mondo!</title>

</head>

<body>

</body>

</html>

Vediamoli nello specifico:

Il tag doctype ha lo scopo di specificare che la pagina che stiamo generando è in formato HTML
Il tag html serve a racchiudere tutto il contenuto della pagina: tutto quello che bisogna codificare deve assolutamente andare qui. Da notare che si può aggiungere la definizione della lingua utilizzata per la pagina, in questo caso l'italiano.
Il tag head contiene le informazioni per la gestione della pagina come l'inserimento del tag title che dà un titolo alla pagina (quello che vediamo nel tab superiore del browser), l'inserimento delle librerie, parte dell'ottimizzazione SEO, la definizione dell'insieme dei caratteri e molto altro.
Per concludere il tag body, nel quale vanno inseriti tutti i tag che andranno a formare il contenuto che verrà stampato a video.

Come avrete notato ogni tag ha una apertura e una chiusura (caratterizzata dall'uso della slash dopo l'apice iniziale, regola fondamentale da rispettare per il corretto funzionamento della pagina. Con un esempio andiamo a vedere qual è la seconda regola rispettare, ovvero l'ordine:

Esempio corretto:

Esempio errato:

Un esempio vale più di mille parole: i tags devono essere chiusi nell'esatta posizione della loro apertura, evitando quindi di "mescolarli" fra di loro.

Dopo questa semplice introduzione andiamo a vedere i tag che caratterizzano il linguaggio HTML, quindi tutti quelli che vanno inseriti all'interno del tag body.

Formattazione:

<h1> fino a < h6> Definizione dei titoli con la relativa grandezza
< p> Definisce un paragrafo
< br /> Inserisce una singola andata a capo
< hr /> Inserisce una linea orizzontale
< !--...--> Definisce un commento
< acronym> Definisce un acronimo
< abbr> Definisce una abbreviazione
< address> Definisce le informazioni per contattare l’autore o il proprietario di un documento
< b> Definisce un testo in grassetto
< bdo> Definisce la direzione di un testo
< big> Definisce un testo ingrandito
< blockquote> Definisce una lunga citazione
< center> Deprecato. Definisce un testo centrato
< cite> Definisce una citazione
< code> Definisce un codice (per esempio di programmazione di computer)
< del> Definisce un testo cancellato
< dfn> Definisce una definizione di un termine
< em> Definisce un testo enfatizzato
< font> Deprecato. Definisce il tipo di carattere, il colore e la dimensione di un testo
< i> Definisce un testo in corsivo
< ins> Definisce un testo inserito
< kbd> Definisce un testo digitato sulla tastiera
< pre> Definisce un testo preformattato
< q> Definisce una piccola citazione
< s> Deprecato. Definisce un testo barrato
< samp> Definisce un esempio di codice per computer
< small> Definisce un testo di dimensioni ridotte
< strike> Deprecato. Definisce un testo barrato
< strong> Definisce un testo marcato
< sub> Definisce un testo a pedice
< sup> Definisce un testo in apice
< tt> Definisce un testo come da telescrivente
< u> Deprecato. Definisce un testo sottolineato
< var> Definisce una parte di testo variabile
< xmp> Deprecato. Definisce un testo preformattato

Moduli:

< form> Definisce un modulo HTML per l’inserimento da parte dell’utente
< input > Definisce un controllo di inserimento
< textarea> Definisce un controllo di testo multilinea
< button> Definisce un pulsante
< select> Definisce una lista di selezione (per capirci i menù a tendina)
< optgroup> Definisce un gruppo di opzioni correlate in una lista di selezione
< option> Definisce un’opzione in una lista di selezione
< label> Definisce un’etichetta per un elemento di input
< fieldset> Definisce un bordo intorno agli elementi in un modulo
< legend> Definisce una didascalia per un elemento fieldset
< isindex> Deprecato. Definisce un indice di ricerca relativo al documento

Frames:

< frame > Definisce una finestra (un frame) in un frameset
< frameset> Definisce un gruppo di frames
< noframes> Definisce un contenuto alternativo per quegli utenti che non supportano i frames
< iframe> Definisce un frame in linea

Multimedia:

< img > Definisce una immagine
< map> Definisce una immagine-mappa
< area > Definisce un’area all’interno di una immagine-mappa
< figure > Definisce un’area dedicata all'inserimento di immagini, illustrazioni. diagrammi ecc...
< figcaption > Definisce una didascalia per le immagini
< audio > Definisce l'inserimento di un file audio
< video > Definisce l'inserimento di un file video
< canvas > Definisce l'inserimento di un container trasparente che permette il rendering dinamico di immagini bitmap mediante l'utilizzo del Javascript.

Collegamenti:

< a> Definisce un’àncora
< link > Definisce la relazione tra il documento ed una risorsa esterna

Liste:

< ul> Definisce una lista non ordinata
< ol> Definisce una lista ordinata
< li> Definisce un oggetto della lista
< dir> Deprecato. Definisce una lista di cartelle
< dl> Definisce una lista di definizioni
< dt> Definisce un termine (un oggetto) in una lista di definizioni
< dd> Definisce la descrizione di un termine in una lista di definizioni
< menu> Deprecato. Definisce un menu

Tabelle:

< table> Definisce una tabella
< caption> Definisce una didascalia per la tabella
< th> Definisce l’intestazione di cella in una tabella
< tr> Definisce la riga di una tabella
< td> Definisce la cella di una tabella
< thead> Raggruppa il contenuto delle intestazioni in una tabella
< tbody> Raggruppa il contenuto del corpo in una tabella
< tfoot> Raggruppa il contenuto del piè di pagina in una tabella
< col > Definisce i valori di attributo per una o più colonne in una tabella
< colgroup> Definisce un gruppo di colonne in una tabella per la formattazione

Stili:

< style> Definisce le informazioni di stile per un documento
< div> Definisce una sezione in un documento
< span> Definisce una sezione in un testo

Meta-informazioni:

< meta> Definisce le metainformazioni sull’HTML del documento
< base > Definisce l’indirizzo o la destinazione predefinita per tutti i collegamenti in una pagina
< basefont > Deprecato. Definisce il tipo di carattere, il colore o la dimensione predefinita

Programmazione:

< script> Definisce uno script client-side (un codice avviato sul computer di chi visualizza la pagina)
< noscript> Definisce un contenuto alternativo per gli utenti che non supportano scripts client-side
< applet> Deprecato. Definisce una applet incorporata
< object> Definisce un oggetto incorporato
< param > Definisce un parametro per un oggetto

Col termine "deprecato" vuol dire che quei tipi di tags non rientrano più nello standard di HTML5 ma questo non vuol dire che non siano validi e che non possano essere più usati.

Ultima cosa riguardo i tags: lo scopo di HTML5 era di semplificare la lettura del codice sia per chi non se ne intendesse, sia per coloro che sanno tutto a riguardo. Proprio per questo motivo sono stati creati dei tags particolari che a prima vista sembrerebbero dei "div", ovvero delle semplici sezioni della pagina, ma che in realtà aiutano parecchio nel suddividere il progetto con regole precise e di facile comprensione:

Header: contiene la testata della pagina, la parte che compare immediatamente all'occhio
Nav: rappresenta una parte della pagina che contiene link di navigazione ad altre pagine o ad altre parti della stessa pagina
Article: contiene una sezione autonoma distribuibile e riutilizzabile
Aside: rientrano i contenuti a margine della pagina
Section: di facile intuizione, contiene una sezione
Footer: Il footer è la parte conclusiva di un sito web, di solito contraddistinta da una sezione di colore differente che mostra una differenza cromatica con il resto del sito web. Di solito viene considerato come risorsa secondaria, dove non si pubblicano contenuti.

Per dare un'idea, la struttura base di tutti questi tag generalmente si presenta nel seguente modo:

< header>...< /header>

< nav>...< /nav>

< article>...< /article> < aside>...< /aside>

< section>...< /section>

< footer>...< /footer>

Gli attributi

I tag HTML utilizzati da soli spesso non sono sufficienti, infatti per ovviare a questo problema esistono gli attributi che servono per specificare la funzione o la tipologia dell’elemento, per memorizzare dati o per dare un senso al contenuto. Un tag associato con gli attributi si scrive in questo modo:

<tag attributo1="valore1" attributo2="valore2">

Un esempio pratico si può applicare sul tag input, che come abbiamo già visto nella lista soprastante, è un componente essenziale di un form:

<input type="email" name="email" placeholder="Scrivi il tuo indirizzo email...">

In questo esempio si assegna al tag input l'attributo type con valore email, dichiarando quindi che è necessario inserire un'indirizzo e-mail, l'attributo "name" assegna un nome e viene utilizzato specialmente nel PHP, mentre il placeholder è il testo che compare nella casella.

Un esempio completo o quasi potrebbe essere:

<input type="email" name="email" placeholder="Scrivi il tuo indirizzo email..." title="Inserisci la tua e-mail" id="identificatore-univoco" class="identificatore-comune" style="proprietà-da-decidere">

Vediamo quindi una panoramica degli attributi/valori:

Title: compare una etichetta descrittiva quando si passa il cursore del mouse sopra all'elemento
ID: verrà spiegato meglio più avanti, tuttavia serve ad associare un identificatore univoco ad un elemento.
Class: anche questo verrà spiegato meglio più avanti, serve a stabilire che l’elemento appartiene ad una serie di “classi”, quindi più elementi possono utilizzare la stessa classe, a differenza dell'ID che può essere utilizzato da un solo elemento in tutta la pagina
Alt: Utilizzato per il tag img serve a fornire un testo alternativo in caso di non disponibilità dell’immagine stessa
Target: se settato su "_blank" permette di aprire in una nuova scheda del browser il collegamento cliccato. Di default la pagina viene aperta nel documento stesso.
Value: viene usato per definire il testo di un elemento, ad esempio un pulsante con il value "Cliccami" riporterà questo testo all'interno del pulsante.
Type: abbiamo visto solo quello di tipo e-mail ma ne esistono altri quali: submit (invia i dati di un form), reset (elimina tutti i dati inseriti in un form), text (definisce l'inserimento di un testo in una casella), password (definisce l'inserimento di una password in una casella), button (definisce l'intenzione di creare un pulsante), tel (definisce una casella nel quale inserire un numero di telefono, su un cellulare il tastierino diventa numerico di default), number (definisce una casella nel quale inserire dei numeri) e molti altri ancora!
Href: Associato alle ancore, serve ad inserire un link che punta ad altre pagine
Method: POST o GET. Viene utilizzato all'interno del tag form
Action: utilizzato per i form o per i pulsanti, indica quale pagina o script associare al momento dell'invio dei dati.

Ovviamente non sono tutti perchè, come già detto a inizio pagina, un'articolo non basterebbe per elencarli e spiegarli tutti a fondo. Bisogna essere curiosi e avere voglia di imparare per cercare di apprenderli tutti come si deve.
Avendo spiegato attributi e tags passerei al CSS, sottolineando a tutti che quello che abbiamo visto non è nient'altro una minima parte del mondo HTML, ma si può benissimo dire che sia una base solida.

Cos'è il CSS?

Il CSS, acronimo di Cascading Style Sheets è un linguaggio usato per definire la formattazione e lo stile di documenti HTML, XHTML e XML. Vengono più comunemente chiamati fogli di stile. L'ultima versione è la 3.0

Coi CSS è possibile formattare qualunque cosa ci passi in mente: il testo, i colori, le dimensioni, le disposizioni, lo stile degli elementi ma anche creare animazioni e transizioni davvero interessanti. Esistono modi differenti di usare questo linguaggio:

Inline: viene utilizzato il CSS nella stessa linea di codice del tag html che vogliamo formattare mediante l'attributo "style".

Tra il tag head: si inserisce al suo interno il tag <style> o per essere più precisi <style type="text/css">

Link esterno: bisogna scrivere tutto il CSS, escluso il tag style, in un documento .css ed inserirlo nella directory principale del sito. Dopodichè nel file HTML, tra il tag head, scrivere <link rel="stylesheet" type="text/css" href="nomefile.css">

Le proprietà e i valori vanno inseriti all'interno delle graffe, ad esclusione del metodo inline, che prevede il semplice uso delle virgolette (<div style="proprietà-valore">contenuto</div>

Per gli altri due metodi invece è obbligatorio l'utilizzo dell'ID e delle classi, come già accennato precedentemente.

Un esempio semplificherà il tutto:

<div id="valore">contenuto</div>

<div class="valore/valori differenti">contenuto</div>

Il valore o i valori scelti (possono essere qualsiasi cosa purchè siano comprensibili e semplici da utilizzare) possono essere utilizzati all'interno del tag head o un foglio di stile esterno per applicare tutte le proprietà CSS che vogliamo. Utilizzando un ID possiamo usare il nome scelto una sola volta per applicarlo sull'elemento in questione, mentre con una classe possiamo scegliere lo stesso nome e applicarlo su tutti gli elementi che vogliamo all'interno della pagina. Per selezionare l'ID ed utilizzarlo nei due metodi bisogna anticipare il nome scelto con un cancelletto (#), per quanto riguarda la classe bisogna anticipare il nome con un puntino.

• Esempio in una pagina html con l'utilizzo dell'ID e della classe:

<div id="testo">contenuto</div>

<div class="testo">contenuto</div>

• Esempio nel tag head o in un foglio di stile esterno:

#testo {proprietà:valore}

.testo {proprietà:valore}

Per lo stesso nome possono essere utilizzate tutte le proprietà che si vogliono purchè siano separate da un punto e virgola, sulla stessa linea e ovviamente all'interno delle graffe.

Ora vediamo nel dettaglio quali proprietà si possono usare:

Dare stile al testo:

color: green; --> colore testo verde
color: #000000; --> colore testo nero in formato RGB
font-size: 20px; --> grandezza del font in pixel
font-style: italic; --> stile del testo (italic, oblique, normal)
font-weight: bold; --> rende il testo in grassetto
font-family: sans-serif; --> assegna lo stile sans-serif al testo
text-align: center; --> allineamento del testo (left, center, right)
line-height --> altezza della linea di scrittura, non del testo

Background: assegnare uno sfondo a tabelle, contenuti, elementi, testi ecc...:

background-color: red; --> sfondo di colore rosso
background-color: #FFFFFF; --> sfondo colore bianco in formato RGB
background-image: url("nomeimmagine.jpg"); --> immagine esterna come sfondo
background-repeat: no-repeat; --> ripeti immagine (no-repeat, repeat-y repeat-x)

Margin: serve a creare spazio attorno agli elementi e quindi a distanziare un elemento da ciascun lato o da uno solo di essi.

margin-top: 20 px; --> margine alto di 20 pixel
margin-right: 20 px; --> margine destro di 20 pixel
margin-bottom: 20 px; --> margine basso di 20 pixel
margin-left: 20 px; --> margine sinistro di 20 pixel

margin: 15px 25px 35px 10px; --> margine alto 15px, destro 25px, basso 35px, sinistro 10px
margin: auto; --> oggetto centrato automaticamente in orizzontale nel contenitore

Padding: Se i margini servono a creare spazio intorno ad un elemento, il padding è utile per creare spazio intorno al contenuto dell'elemento. Tra margini e padding vi è una fondamentale differenza: quando si usa il padding, lo spazio di distanza viene inserito all’interno dei bordi dell’elemento e non all’esterno.

padding-top: 20 px; --> padding alto di 20 pixel
padding-right: 20 px; --> padding destro di 20 pixel
padding-bottom: 20 px; --> padding basso di 20 pixel
padding-left: 20 px; --> padding sinistro di 20 pixel

padding: 25px 28px 22px 21px; --> padding alto 25px, destro 28px, basso 22px, sinistro 21px

Altezza e larghezza: sono due proprietà che servono per definire la larghezza e la lunghezza di un elemento.

height: 100px; --> altezza 100 pixel
width: 200px; --> larghezza 200 pixel
width:50%; --> larghezza impostata al 50% del contenitore
max-width: 300px; --> larghezza massima 300 pixel
max-height: 250px; --> altezza massima 250 pixel
min-width: 140px; --> larghezza minima 140 pixel
min-height: 350px; --> altezza minima 350 pixel

Overflow: è la proprietà che consente di determinare come si deve comportare il browser quando un contenuto fuoriesce dal suo contenitore.

overflow: visible; --> contenitore visibile
overflow: hidden; --> contenitore non visibile
overflow: scroll; --> finestra con barra di scorrimento
overflow: auto; --> automatica, simile a scroll ma a scorrimento quando è necessario (in base alla dimensione dello schermo)

Posizione: la proprietà position consente di alterare la posizione di un blocco nel flusso in cui i diversi elementi sono inseriti.

static --> prevede il normale comportamento dei box all'interno del flusso
absolute --> un blocco posizionato in modo assoluto può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso
fixed --> uguale al posizionamento assoluto con la differenza che i blocchi rimangono ancorati alla posizione iniziale e il riferimento è sempre la finestra del browser
relative --> prevede lo spostamento di un elemento relativamente alla posizione che assume normalmente nel flusso

Transizioni, animazioni e trasformazioni: queste funzionalità di CSS3 permettono di mettere in movimento le nostre pagine web, senza l’ausilio di alcun linguaggio di scripting.

transition-property: la proprietà CSS su cui si vuole applicare la transizione;
transition-delay: indica dopo quanto tempo dal caricamento della pagina dovrà iniziare la transizione;
transition-duration: la durata della transizione;
transition-timing-function: la funzione di transizione temporale.

Le trasformazioni possono essere 2D o 3D. Le trasformazioni 2D applicano effetti di traslazione, rotazione, scalatura e distorsione; le trasformazioni 3D consentono anche la vista in prospettiva dell’oggetto da trasformare. La proprietà da utilizzare per richiamare una trasformazione è transform. La proprietà transform può assumere i seguenti valori:

matrix(n,n,n,n,n,n) e matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): definisce una trasformazione tramite matrice;
translate(x,y), translate3d(x,y,z), translateX(x), translateY(y) e translateZ(z): definisce una traslazione;
scale(x,y), scale3d(x,y,z), scaleX(x), scaleY(y) e scaleZ(z): definisce una scalatura;
rotate(angle), rotateX(angle), rotateY(angle) e rotateZ(angle): definisce una rotazione;
skew(x-angle,y-angle), skewX(angle) e skewY(angle): definisce una distorsione.

Le seguenti proprietà possono invece essere utilizzate solo per trasformazioni 3D:

transform-style: specifica come devono essere trasformati gli elementi all’interno di un elemento che viene trasformato;
perspective: definisce di quanti pixel viene spostata la vista sull’elemento CSS;
backface-visibility: stabilisce se la faccia posteriore dell’elemento deve essere visibile all’utente.

Le animazioni sono probabilmente lo strumento più potente per il web motion design che mette a disposizione CSS3. L’animazione consente di fare cambiare gradualmente stile ad un elemento della pagina. In particolare, per ciascun cambiamento di stile bisogna specificare un keyframe. Il keyframe determina il tipo di stile da applicare all’elemento ad un determinato istante temporale, e fondamentalmente rappresenta il “codice” di esecuzione dell’animazione. Le proprietà più salienti che possono essere impostate per le animazioni sono le seguenti:

@keyframes: una lista di stili da applicare all’elemento a determinati istanti di tempo;
animation: modalità abbreviata che serve ad impostare tutte le proprietà che seguono;
animation-delay: indica dopo quanto tempo far partire l’animazione;
animation-duration: specifica quanto dura l’animazione;
animation-fill-mode: indica lo stile da applicare prima che l’animazione parta e dopo che termina;
animation-name: nome dell’animazione (fadeIn, fadeOut, shake, pulse, rotate, zoom, roll, slide, flip e molte altre ancora);
animation-timing-function: identica alla proprietà transition-timing-function delle transizioni.

Il discorso è uguale a quello enunciato per il linguaggio HTML: le proprietà riportate qui sopra sono in linea di massima quelle più diffuse ma sono solo una piccola fetta del mondo CSS. Esistono tantissime altre proprietà da analizzare per rendere unica la nostra pagina web, per esempio personalizzare i bordi degli elementi, utilizzare le pseudo-classi, gestire i box tramite il flex e creare un design responsive con le media queries. Tuttavia, come ribadito sarebbe quasi impossibile riportarle tutte in un unico articolo.

A presto, GG-CREATOR.

« Articolo successivo:
Programmazione back-end » Articolo precedente:
Linee guida per un buon sito

Nozioni base sulla programmazione front-end

HTML & CSS

Cos'è l'HTML?

Template di base

Gli attributi

Cos'è il CSS?

Su di me

Riferimenti

Social

Trattamenti