HTML – 2°
HTML è l’acronimo di HyperText Markup Language (“Linguaggio di contrassegno per gli Ipertesti”) e non è un linguaggio di programmazione. Si tratta invece di un linguaggio di markup (di ‘contrassegno’ o ‘di marcatura’), che permette di indicare come disporre gli elementi all’interno di una pagina.
Queste indicazioni vengono date attraverso degli appositi marcatori, detti tag (‘etichette’), che hanno la caratteristica di essere inclusi tra parentesi angolari (ad es, <img> è il segnaposto di un’immagine).
Con HTML quindi indichiamo, attraverso i tag, quali elementi dovranno apparire su uno schermo e come essi debbano essere disposti. Tutte queste indicazioni sono contenute in un documento HTML, spesso detto “Pagina HTML“, che è rappresentato da un file di testo, ovvero con quei tipi di file che possiamo modificare con programmi come notepad. In genere hanno un nome che finisce con .html.
Ciò significa che HTML non possiede i costrutti propri della programmazione, come i meccanismi “condizionali”, che consentono di reagire in modo diverso a seconda del verificarsi di una condizione (“in questa situazione fai questo, in quest’altra fai quest’altro”), o i costrutti iterativi (“ripeti questa azione, finché non succede questo”).
Nota: Si parla in questo caso di linguaggio dichiarativo, che serve, appunto ad indicare cosa deve apparire sullo schermo (testi, immagini, suoni, etc.), dove e in che sequenza. Nel caso di linguaggi in cui specifichiamo algoritmi precisi con “strutture di controllo”, come C, C++, Java, o anche PHP e JavaScript, parliamo di “linguaggi imperativi”.
HTML + CSS + JavaScript
Anche se non ce ne occuperemo direttamente, è utile sapere che per lavorare con HTML è utile conoscere tutto il cosiddetto “stack“, ovvero tutte le tecnologie necessarie a realizzare un sito o una applicazione.
Spesso in passato si utilizzavano alcuni tag HTML per definire font, i colori o le dimensioni degli oggetti sullo schermo. Oggi il quadro è definitivamente cambiato e molte di quelle funzionalità sono deprecate. Ecco quale è la corretta divisione dei compiti:
HTML
serve a definire quali sono gli elementi in gioco, stabilire collegamenti (link) tra le pagine e l’importanza (non la forma o il colore) che hanno i testi, creare form per gli utenti, fissare titoli, caricare immagini, video, etc.
CSS
o “fogli di stile”. Si tratta di una serie di regole che permettono di definire l’aspetto (lo stile) che devono assumere gli elementi sulla pagina. Dimensioni, colori, animazioni, ogni caratteristica visuale può essere manipolata.
JavaScript
è un vero e proprio linguaggio di programmazione che consente di manipolare veramente qualunque cosa: lo stile, i contenuti della pagina, ma soprattutto l’interazione con l’utente. Ci permette di creare tutta la logica di una applicazione e di sfruttare le API messe a disposizione dal browser: dalla gestione del mouse al touch, dalla manipolazione delle immagini, alle richieste di dati dinamiche (in modalità Ajax) alla gestione di dati in locale (grazie ai LocalStorage).
HTML è uno standard: il W3C
Da quando Tim Berners Lee, nel 1991, ha definito la prima versione del linguaggio, fino ai giorni nostri, HTML ha continuato ad evolversi fino a maturare nello standard HTML 5.
Il secondo rilascio delle specifiche (HTML 2) è stato pubblicato dallo IEFT nel 1995, mentre già stava nascendo il W3C: World Wide Web Consortium l’organizzazione fondata dallo stesso Berners Lee con CERN e MIT, che oggi vede coinvolti numerosi istituti universitari e i più importanti attori tecnologici sulla scena mondiale come Apple, Microsoft, Google, Facebook, IBM, Adobe, e moltissimi altri.
Il W3C si occuperà di traghettare lo standard attraverso la versione 3.2 (1997) fino alla definizione di HTML 4 nel 1998 e HTML 4.01, la versione che ha sostenuto la crescita del Web di tutti gli anni 2000 e che assurgerà a standard ISO proprio a cavallo del terzo millennio.
Proprio negli anni 2000 nasce XHTML, un filone parallelo che cerca di dare maggior rigore all’HTML, definendolo come “applicazione XML” ne sono già state rilasciate due versioni (XHTML1.0 e XHTML1.1), molto simili a HTML 4.1, poi praticamente abbandonate già nel 2011 quando il W3C decide di affermare lo standard HTML 5 (tutt’ora sussiste una definizione di XHTML5.1 nella bozza delle specifiche HTMl5).
HTML5, Web e mobile
La versione di HTML che esamineremo è quella più attuale: HTML 5, che è anche la versione che nasce appositamente per uscire dal solo ambito Web e diventare piattaforma per la creazione di applicazioni, anche desktop e mobile.
La specifica HTML5 infatti si compone della definizione di:
– una sintassi per il markup più efficace e adatta alle esigenze più moderne, con l’introduzione di specifici controlli per i form o degli attributi “data-” da arricchire i tag di informazioni specifiche;
– una serie di API che consentono di gestire, a livello approfondito aspetti come network, multimedia, e hardware dei dispositivi. In altre parole dalla gestione del video e dell’audio al monitoraggio delle batterie di un device.
Questo sviluppo dello standard ha dato il via alla generazione delle cosiddette App mobile ibride, che sfruttano sia HTML5, per creare app che si possono distribuire, come quelle native, sui marketplace dei dispositivi più comuni (come Google Play per Android ad esempio).
Link e ipertesti
La potenza di Internet consiste nell’essere un insieme esteso di contenuti connessi tra loro. Il linguaggio HTML e i link sono alla base di questo meccanismo che consente di muoversi rapidamente tra testi, immagini, video, applicazioni e quant’altro creando percorsi i propri percorsi di navigazione in totale autonomia.
Per accedere rapidamente a una ormai enorme mole di informazioni, sono nati i motori di ricerca, che si basano su una serie di elementi “semantici” per rispondere adeguatamente alle richieste degli utenti. Si parte dall’analisi del testo (o del contenuto) e dei collegamenti, fino a sfruttare i comportamenti degli utenti per catalogare le pagine e stabilire il livello di rilevanza (ranking) che hanno a seconda della singola query di ricerca.
L’ottimizzazione dei contenuti per favorire il posizionamento della pagina per specifiche ricerche si dice SEO (Search Engine Optimization).
CREARE LA PRIMA PAGINA
Seppure molto potente, HTML non è un linguaggio complesso e può offrire soddisfazioni immediate. Per iniziare basta pochissimo, quasi niente in realtà:
– Un browser, ne abbiamo almeno uno già installato nel PC o nei device che utilizziamo.
– Un editor di testi, anche di questi ce ne sono a bizzeffe e tipicamente ce n’è uno in ogni ambiente operativo. L’importante è ricordare che non dobbiamo utilizzare programmi come Word, OpenOffice o WordPad, che sono “word processor” evoluti e non servono allo scopo.
Lanciamo il nostro editor di testi, ad esempio il classico blocco note di Windows e scriviamo un semplice testo come il seguente:
Ciao Mondo!
Fatto questo salviamo il file con estensione .html ad esempio “hello.html“. Per i meno esperti, Windows a volte nasconde le estensioni e potrebbe risultare difficile salvare correttamente i nostri file. In questi casi possiamo abilitare le estensioni grazie alle opzioni di visualizzazione delle cartelle.
Non è raro trovare pagine HTML con estensione .htm. Questa abitudine, quasi del tutto scomparsa, trova radici nei nomi dei file dell’ms-dos e di Windows 3.1. Questi sistemi operativi potevano gestire solo file con nomi di massimo 8 caratteri ed estensioni di non più di 3 lettere. Dunque .html era diventato .htm, così come .jpeg era diventato .jpg.
Apriamo il file HTML
Una volta assegnata questa estensione, cliccando sul file si aprirà automaticamente il browser predefinito di sistema e mostrerà una schermata simile alla seguente:
Niente di straordinario dunque: viene mostrato il testo a video! Ma vediamo cosa succede se aggiungiamo qualcosa al nostro markup:
<h1>Ciao Mondo!</h1>
<p>Questa è la nostra prima pagina HTML!</p>
Una volta aggiunto un titolo (Heading) di primo livello (<h1>) e un paragrafo ( <p>) proviamo ad aggiornare la pagina (in genere basta digitare F5) il testo viene modificato in questo modo:
Il browser mostra il nostro titolo con un carattere grande e in grassetto. Mentre il contenuto del paragrafo (quello compreso tra <p></p>) è rappresentato con una dimensione più piccola.
In effetti non abbiamo detto nulla sullo stile degli elementi rappresentati, ci siamo limitati a definire un titolo e un paragrafo e, come ci ritroveremo a dire diverse altre volte, questo è il compito del markup HTML. Tali definizioni infatti hanno un’importanza che va oltre la sola rappresentazione grafica.
Le scelte di stile sono comunque importanti ma accessorie, in questo caso vediamo applicate quelle preconfezionate nel browser e vedremo poi come modificarle a nostro piacimento.
I tag <head> e <body>: la struttura minimale della pagina HTML
Per fare le cose un po’ meglio e dirci soddifatti della nostra prima pagina torniamo sul nostro editor e modifichiamo il markup in questo modo:
Aggiornando la pagina con F5 non osserveremo sostanziali cambiamenti, ma più avanti vedremo quanto sia importante definire per bene la struttura della pagina.
Sbirciare l’HTML nelle pagine Web
Abbiamo visto come completare con soddifazione una prima pagina HTML, ma una delle cose più interessanti di questo linguaggio è che il markup è scritto come un testo, perciò è possibile leggere codice scritto da altri.
Tutti i browser infatti danno la possibilità di mostrare il codice HTML delle pagine e quasi tutti permettono di farlo con la combinazione di tasti CTRL+U.
Non ci sorprenda, né ci scoraggi, trovare un codice molto fitto e complesso dietro a pagine apparentemente molto semplici come quella di DuckDuckGo.
Del resto quello di Google è molto più intricato. Come sappiamo HTML è alla base non solo di testi e ipertesti ma di vere e proprie applicazioni.
Strumenti di sviluppo, l’editor
Gli strumenti principali che servono a realizzare pagine HTML sono editor di testo, browser, software per manipolare foto o immagini vettoriali, tool per la progettazione e la messa online del sito o il deploy dell’app.
Per ogni lavoro avere gli attrezzi giusti è fondamentale. Un buon ambiente di sviluppo può fare la differenza sia quando iniziamo a sviluppare in HTML, sia quando abbiamo a che fare con la manutenzione di lavori già fatti.
Editor di testo
La scelta dell’editor è piuttosto importante, è il principale compagno di strada in questo percorso e tipicamente diventa un’estensione naturale del pensiero. Gli editor che risultano tra i più utilizzati sono:
Ce ne sarebbero numerosi altri da citare, perciò oltre a suggerire alcuni nomi vediamo quali sono le caratteristiche e i criteri che ce li hanno fatti scegliere.
Syntax Highlighting
Serve a evidenziare la sintassi del linguaggio e rendere più leggibile il codice sorgente. Ogni tag, attributo, numero o parola chiave assume uno specifico colore e diventa subito riconoscibile. Grazie a questa caratteristica emergono più facilmente eventuali errori di battitura e diventa anche più chiara la struttura della pagina.
Autocompletamento
Mentre scriviamo il codice l’editor propone di completare automaticamente la parola o il comando che stiamo digitando. Ci sono diversi livelli di autocompletamento anche in base ai linguaggi.
In HTML ad esempio può risultare comoda la chiusura automatica dei tag: quando finiamo di scrivere <p> viene subito scritto automaticamente </p> lasciandoci la comodità di scrivere dentro altro contenuto.
Altra comodità è il suggerimento delle regole CSS, visto che sono numerose e non è male averle tutte sotto mano per decidere quale inserire.
Community e plugin
Anche se gli editor offrono poche funzioni di base, le esigenze possono portarci a voler aggiungere alcune caratteristiche e diventa importante valutare quanti e quali plugin sono disponibili, quanto è numerosa la base di utenti e quanto è attiva la comunità degli sviluppatori. Un plugin a volte può essere determinante
Tra i plugin più utili ci sono ad esempio quelli che permettono di memorizzare e replicare degli snippet di codice (o il testo lorem ipsum ad esempio), quelli che permettono il confronto tra versioni diverse dei file (diff).
Macro e Shortcut
Le scorciatoie da tastiera sono estremamente importanti quando si sviluppa. Tutti gli editor mettono a disposizione le combinazioni di tasti per le operazioni più comuni: copia, incolla, taglia, undo etc.
Possiamo aver bisogno però di ulteriori automatismi, come richiamare uno snippet di codice, selezionare direttamente un tag etc. Per ottenere questo può rivelarsi determinante un editor che consenta di registrare sequenze di azioni (macro) da poter associare a combinazioni di tasti (shortcut).
Quale editor scegliere?
Gli editor di testi di cui sopra soddisfano tutti i requisiti citati e la scelta è veramente molto soggettiva, a volte legata anche all’abitudine. Tuttavia, per chi non fosse già particolarmente affezionato ad un software in particolare, la scelta potrebbe cadere su Atom.io, considerando che dei tre è il prodotto più giovane, gira su tutte le piattaforme è gratuito e ricco di estensioni.
Il Browser, che cos’è, come e perché tenerne conto
Il programma che interpreta il markup delle nostre pagine HTML e mostra a video tutto ciò che indichiamo si chiama Browser. La parola tradotta letteralmente sta per “colui che dà un’occhiata in giro” ed è stata utilizzata per definire il tipo di programmi che usiamo per navigare sul Web.
Per capire meglio come lavorare in HTML è importante soffermarci su alcuni degli aspetti più importanti che riguardano proprio questi strumenti, diventati nel tempo molto di più che semplici software per la “navigazione di Internet”.
Tra i compiti svolti dal browser, sono due quelli che ci interessano di più: il caricamento e la visualizzazione (rendering) della pagina HTML.
Caricare la pagina HTML
Caricare la pagina significa acquisirne il contenuto, più tecnicamente il browser richiede che venga effettuato un trasferimento di file. Perché sia possibile effettuare le richieste, la pagina HTML, come pure tutti i file ad essa correlati, è raggiungibile facendo riferimento ad un certo indirizzo.
Semplificando possiamo dire che grazie agli indirizzi possiamo effettuare richieste:
– in “locale”, quando i file si trovano sul device o sul computer su cui gira il browser
– in “remoto”, quando i file sono su un server da contattare tramite internet (o altra rete).
La fase di caricamento della pagina è il primo punto cruciale quando si parla di perfomance: perché un sito o una applcazione risultino gradevoli da utilizzare bisognerà fare in modo di minimizzare quanto più possibile i tempi di caricamento.
A tal proposito esistono una serie di tool e tecniche come la “minificazione” del codice, il caching, l’uso di siti ad hoc per il trasferimento veloce di contenuti (CDN), gli sprite, etc. Cose di cui non ci occuperemo direttamente, ma delle quali è utile conoscere l’esistenza.
Alcuni di questi accorgimenti come la cache sono inseriti anche nei browser. Inoltre tutti i browser inoltre forniscono dei tool per gli sviluppatori (in genere si attiva digitando F12) che consentono, tra le altre cose, di monitorare i tempi di caricamento dei file.
Rendering della pagina
La seconda fase cruciale è quella della visualizzazione ovvero del cosiddetto rendering della pagina, la fase in cui il browser interpreta i documenti HTML e dispone sullo schermo gli elementi (testi, immagini, filmati) a seconda delle indicazioni ivi contenute.
Il componente del browser che svolge questo compito è detto “Rendering Engine” (motore di rendering), che in sostanza si comporta come un sistema operativo in miniatura e che sfrutta direttamente le caratteristiche hardware del device su cui visualizziamo le nostre pagine.
In questa fase quindi, specie nei progetti più complessi o quando le pagine sono destinate a dispositivi lenti o con poca memoria, bisogna fare attenzione a non sovraccaricare di lavoro l’engine del browser.
Anche a questo proposito ci sono una serie di strumenti, all’interno dei browser stessi, per verificare il tempo di esecuzione e l’uso di risorse dovute all’elaborazione della pagina.
Il browser e gli strumenti di sviluppo
Il browser è fondamentale per testare il nostro lavoro sotto il profilo visuale e non solo. I browser moderni come Google Chrome, Mozilla Firefox, Microsoft Edge e Apple Safari (per non fare torto a nessuno), forniscono infatti i cosiddetti “strumenti di sviluppo” grazie ai quali possiamo tenere sotto controllo diversi aspetti delle pagine HTML.
Poiché queste funzionalità si attivano col tasto F12, in alcune occasioni si parla di “F12 Tools”. Tra questi strumenti troviamo moltissime cose, dall’analisi del caricamento della pagina all’emulazione dei sensori dei device, dal debug step-by-step del codice JavaScript agli editor di SVG. Vediamo quelli più utili.
L’esplorazione del codice e modifica dei CSS
Possiamo sezionare la pagina e vedere cosa c’è dietro a ogni elemento. Inoltre possiamo esaminare e modificare il CSS per effettuare delle modifiche e verificare “al volo” gli effetti.
Mobile View
È una modalità che ci consente di effettuare una prima e rapida valutazione della resa grafica e della user experience che otterremo sui dispositivi mobili.
Console
Molto utile per interventi rapidi: per tracciare variabili, testare piccole porzioni di script o ricordare al volo le proprietà e i metodi di un oggetto.
I browser non sono tutti uguali
Anche se praticamente tutti i browser moderni garantiscono una pressocché totale aderenza agli standard del W3C, rimangono ancora alcune piccole differenze nell’implementazione delle direttive, quindi nel modo in cui i singoli browser mostrano i contenuti.
In sostanza quando lavoriamo al nostro HTML, possiamo trovarci a fare i conti con:
– la compatibilità dei browser (specie quelli più datati possono dare problemi);
– le capacità dei dispositivi (in termini di performance e banda ad esempio);
– le tipologie di schermo cui sono destinate le nostre pagine HTML.
Se in passato l’idea dominante era quella di tentare di ottenere la stessa visualizzazione su tutti i browser, oggi è fondamentale che i contenuti siano proposti in modo adeguato alla singola situazione (es. mobile, large screen, desktop, vecchi browser, etc.).
Un buon riferimento per verificare la compatibilità dei browser è caniuse , in cui troviamo le direttive e funzionalità che sono supportate dai più importanti browser in circolazione, sia desktop, sia mobile.
Caniuse riporta anche le statistiche di accesso con diversi browser, un indice comunque utile per valutare la diffusione dei browser, le preferenze degli utenti e la penetrazione delle nuove versioni.
Quale Browser scegliere?
Naturalmente il consiglio è quello di di provarli tutti e cercare quello che meglio ci sembra adattarsi alle proprie esigenze. È corretto indicare però che in genere nel toolkit degli sviluppatori la presenza di Chrome non manca quasi mai, che anche Firefox è piuttosto utilizzato, vista la varietà dei tool disponibili, e che i browser Microsoft, che pure hanno strumenti avanzati di sviluppo, sono spesso utilizzati per valutare questioni di compatibilità.
Software per immagini nelle pagine HTML
Le pagine HTML professionali sono ricche di elementi grafici (pensiamo ai siti Web o alle App mobile) e sarà fondamentale avere uno o più strumenti per la creazione e manipolazione delle immagini.
Per orientarci meglio è utile dividere gli elementi grafici in due grandi categorie:
– Foto (e illustrazioni)
hanno funzione decorativa o divulgativa e sono spesso parte del contenuto della pagina
– Elementi di layout
arricchiscono e chiarificano il contenuto,ma quasi mai ne sono parte: icone,separatori,badge,tooltip,bozzetti della pagina
La suddivisione è tutt’altro che banale, infatti a seconda della tipologia di immagine possiamo avere software dalle caratteristiche molto diverse. Cerchiamo anche in questo caso di capire quali siano le funzioni più utilizzate e quali i sotfware che ci possono meglio supportare.
Foto e immagini bitmap
Quando si parla di elaborazione grafica non si può non citare Photoshop. È certamente il software più completo e più utilizzato, il che significa anche più ricco letteratura e di esempi che ci aiutano a lavorare meglio.
Diamo però un’occhiata alle operazioni più frequentemente utilizzate nella gestione di immagini:
In base a queste esigenze, quando il budget non ci consentisse di avere uno strumento così potente a portata di mano, abbiamo delle valide alternative gratuite, come Paint.NET o Gimp. Le community a sostegno di questi progetti inoltre sfornano numerosi plugin per estenderne costantemente le funzioni.
Da non dimenticare anche un software come Pixlr e i diversi validi servizi online.
Modifiche su molte immagini
Altri software che possono essere utili sono quelli che consentono di applicare le stesse manipolazioni su molti file (elaborazioni batch come tagli ridimensionamenti). Tra questi segnaliamo FastStone Photo Resizer.
Altra cosa che può risultare utile è un software per la gestione degli sprite. Anche se probabilmente ne parleremo poco o per niente in questa guida, è utile sapere che esistono.
Vettoriali, SVG ed elementi di layout
Una delle pratiche ancora molto diffuse è quella di realizzare il bozzetto del layout direttamente su Photoshop. C’è una corrente tra i designer che ha scelto di abbandonare questa tecnica, prediligendo la definizione degli spazi direttamente tramite semilavorati in HTML e CSS. Questo anche grazie alla potenza dei tool di sviluppo dei browser, che consentono di lavorare in modo rapido sul codice.
In ogni caso poi servono sempre logo, icone per menu e sezioni, elementi decorativi, badge e tutti gli elementi che caratterizzano lo stile del sito o dell’app. Anche questi elementi possono essere realizzati con tecniche diverse e con diversi software.
La pratica più diffusa è quella di realizzare questi elementi in formato vettoriale SVG, perché:
– è possibile ridimensionarli senza perdita di definizione;
– spesso sono file più leggeri;
– si prestano a manipolazioni interessanti anche con i CSS.
I software più interessanti per generare questo tipo di file sono:
– Adobe Illustrator – parente stretto di Photoshop, atrettanto blasonato e altrettanto professionale. Ottimo per i vettori, naturalmente a pagamento
– Inkscape – ottimo software open source, con una forte community di sviluppatori alle spalle e tutte le caratteristiche per manipolare gli SVG
Anche in questo caso non mancano validi servizi online come:
– SVGO’s Missing GUI, interfaccia di un ottimo progetto nato per l’ottimizzazione dei vettori, insieme ad altri tool come svg-editor;
– editor.method.ac o vectorpaint.yaks.co.nz, per disegnare SVG in modo semplice, da poter utilizzare anche su tablet.
– Gravit, uno strumento molto potente per il design in vettoriale, con funzionalità di alto livello. È disponibile sia come applicazione Web che come app Chrome.
– boxy-svg, un altro ottimo editor da scaricare come app di Chrome e utilizzare direttamente anche fuori dal browser.
Elementi, tag e attributi in HTML
In una pagina HTML tutti gli elementi sono connotati da tag (letteralmente “etichette”). Si tratta di marcatori che evidenziano non tanto l’aspetto, quanto il senso, il ruolo, o l’organizzazione che vogliamo assegnare ai contenuti. Ad esempio se indichiamo un titolo con <h1> per noi le parole in quel titolo rappresentano il tema principale della pagina, al di là del modo in cui saranno visualizzate.
– Questa visione “semantica” degli elementi è fondamentale, ci aiuta a non perdere di vista il fatto che una pagina deve essere un luogo ordinato di informazioni, soprattutto sul Web. Se pensiamo ad esempio al classico contesto delle ricerche online, risulta naturale comprendere che tanto più una pagina sarà associabile a una keyword o a un tema, tanto più facile sarà trovarla. Per questo sarà importante curare cose come l’organizzazione del testo, la definizione dei titoli, dei link dei grassetti.
– Tuttavia in HTML possiamo anche definire lo scheletro dell’interfaccia utente di una app, e in questo frangente i tag diventano utili come supporto all’organizzazione del layout o alla definizione di aree specifiche per l’esperienza utente.
In tutti e due i casi continuiamo a non parlare di “grafica”, ma di struttura.
Come è fatto un tag
Un tag è una keyword del linguaggio racchiusa tra parentesi angolari (<>). Esempi di tag sono <html>, <body> e <h1>, che abbiamo già incontrato nelle lezioni precedenti.
I tag HTML non sono “case sensitive” ciò significa che scrivere <head> o <HEAD> è esattamente la stessa cosa. In ogni caso la consuetudine è quella di scrivere i tag in minuscolo (era una raccomandazione in HTML4 e una richiesta in XHTML).
Elementi contenitori e autonomi, il DOM
Molti elementi in HTML servono per descrivere porzioni di pagina, aree, o contenuti. Ad esempio <body> descrive il contenuto di tutta la pagina, <h1> racchiude un titolo e <p> denota un paragrafo nel testo.
Pertanto un elemento HTML è quasi sempre un contenitore e il suo contenuto è delimitato da:
– tag di apertura (es. <p>);
– tag di chiusura (es. </p>).
<P> Lorem ipsum,quia dolor sit,amet,consectetur,adipisci velit,
sed quia non numquam eius modi tempora incidunt,ut labore et dolore
magnam aliquam quaerat voluptatem. </p>
Le pagine HTML sono quindi formate per composizione di contenitori (annidati) l’uno dentro l’altro. Per capire meglio riprendiamo il nostro semplice esempio:
La struttura che emerge è quella di un albero, in cui i rami sono tutti tag contenitori e le estremità sono composte da testi, immagini o altri elementi come le caselle di input. Tutti questi elementi finali non sono contenitori e non necessitano di un tag di chiusura.
L’albero che abbiamo tracciato ricorda il modo in cui viene rappresentato il documento nella memoria del browser, ovvero il DOM (Document Object Model), il modello del documento HTML di cui l’elemento <html> è il nodo radice.
Indentare il codice
Spesso per sottolineare l’annidamento di un elemento in un altro si usa “indentare il codice”, ovvero discostare il contenuto dall’inizio della riga lasciando spazi (o tab). In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab.
Gli attributi
Un elemento può avere uno o più attributi, che servono per meglio specificare la funzione o la tipologia dell’elemento, per memorizzare dati o per arricchire di significato il contenuto.
Un tag con attributi si scrive in questo modo:
< tag attributo1= ”valore1” attributo2= ”valore2”>
Ecco un esempio pratico
< input type= “email” name= “email” placeholder= “Scrivi il tuo indirizzo email… “>
Il tag input indica genericamente un elemento che consente agli utenti di inserire delle informazioni. Grazie agli attributi però, possiamo specificare che vogliamo un indirizzo email (attributo type) e possiamo comunicarlo all’utente con un messaggio (attributo placeholder).
In sostanza gli attributi:
– sono coppie chiave-valore separate dal carattere = (uguale);
– i valori sono tipicamente racchiusi tra virgolette “”, ma è possibile anche utilizzare gli apici”;
– si scrivono lasciando almeno uno spazio dopo il nome dell’elemento nel tag di apertura (o nell’unico tag nel caso di elementi non contenitori).
Nota: in alcune rare situazioni, come quando il valore dell’attributo contiene in sè le virgolette, è necessario usare gli apici (es. data-nome = ‘Luca “la roccia” Rossi‘).
Gli attributi data– (data-attributes)
Lo standard HTML5 ha introdotto i cosiddetti “data-attributes”, ovvero degli attributi inseriti nei tag allo scopo di ritenere alcune informazioni utili alla gestione del layout o a supporto dell’interfaccia utente.
In pratica possiamo definire un attributo con il prefisso data-, seguito dal nome (es. data-cognome) e assegnare ad esso un valore proprio come facciamo con gli altri attributi.
Mettiamo ad esempio di avere un’agenda e di voler mostrare l’indirizzo e il numero di telefono quando passiamo vicino ai nomi in un elenco. Possiamo associare tutte le informazioni che ci servono ad ogni elemento lista (<li>) grazie agli attributi “data-” e raggiungerli poi facilmente via JavaScript.
L’inserimento di questi attributi personalizzati non avrà alcun effetto sulla resa della pagina. Il browser si limiterà ad ignorarli.
Elementi inline e block, le tipologie di tag per il layout
I tag HTML possono rappresentare oggetti (come ad esempio le immagini) o servire a suddividere la pagina in aree (come i ‘div’ o le ‘section’). Ci sono diverse tipologie di tag e conoscerle diventa determinante per usare il tag giusto al posto giusto e per applicare in seguito le regole CSS.
Le principali tipologie di visualizzazione in cui si dividono gli elementi sono:
Ci sono altre modalità molto interessanti in cui possiamo visualizzare gli elementi grazie alla regola display dei CSS, come la modalità flexbox.
Titoli, paragrafi e testi
HTML è nato per la realizzazione di contenuti ipertestuali ed è naturale che la maggior parte dei tag siano stati creati per l’organizzazione dei testi, quindi per la definizione di titoli, paragrafi sezioni, articoli, etc.
Questa organizzazione ha poco a che vedere con la rappresentazione grafica della pagina, quanto con la sua tematizzazione e con la sua semantica. Nel corso del tempo i tag HTML che definivano aspetti grafici sono stati via via deprecati e sono rimasti quelli che aiutano a identificare sezioni e porzioni significative del testo.
È anche vero che i browser utilizzano questi tag anche per dare maggior chiarezza al testo assegnando loro degli stili preconfezionati.
I paragrafi <p>
Il paragrafo <p> è un elemento contenitore che al suo interno prevede l’inserimento di testo e di altri tag. Ecco un esempio:
Si tratta peraltro di un elemento di tipo Block, questo ad esempio significa che il comportamento di base del browser sarà quello di andare a capo al termine del paragrafo e che sono stabiliti margini per il testo.
Come si intuisce questo elemento è molto utilizzato e sfruttato anche dai CMS, come WordPress, per imbrigliare il testo.
Andare a capo, <br>
Il tag <br> sta per break line e serve per andare a capo nel bel mezzo di un testo. Come è facile notare infatti, anche se andiamo a capo all’interno dell’editor, il testo nel browser non va a capo se non alla fine dello spazio disponibile per il suo contenitore.
Per forzare il testo ad andare a capo, inseriamo un <br>, in questo modo:
Ora, a differenza di quanto recita, il testo andrà a capo dopo la parola “considereranno”.
Se vogliamo lasciare una riga di spazio tra una porzione di testo e l’altra tipicamente utilizzeremmo due paragrafi ma può capitare di utilizzare un doppio <br>
Questo è un testo che va a capo due volte <br>
<br>
nel browser il risultato somiglia alla separazione
tra due paragrafi
Headings, i titoli h1, h2, h3, etc.
I titoli (headings) sono i tag che ci aiutano a definire il tema della pagina. In genere sono rappresentati in grassetto e con una dimensione del testo ingrandita. Anche questi sono elementi di tipo block e sia le dimensioni sia il margine applicato per default dal browser sono proporzionali all’importanza del titolo.
Gerarchia degli headings
Come si intuisce dai numeri i titoli sono gerarchici. Questo significa che h1 sarà il titolo principale della pagina. Se ci serviranno altri titoli per specializzare alcune sezioni importanti del testo (le “main sections”) è consigliato scegliere prima h2, per le sottosezioni utilizzeremo h3 e così via con una suddivisione sempre più granulare fino ad utilizzare l’h6.
La gerarchia impatta anche sul peso che gli headings hanno in termini di tematizzazione della pagina. I SEO tendono a consigliare di inserire nell’h1 le parole chiave principali per definire il contenuto e negli h2 parole chiave che sono accessorie.
Gerarchia degli headings nelle home page
Se stiamo parlando della home page è più indicato utilizzare l’h1 per il nome del sito, l’h2 per le categorie e h3 per i titoli degli ultimi contenuti pubblicati (o i più importanti). L’h4 può essere utile per i titoli di altri contenuti correlati e h5 per cose meno importanti, meno tematizzanti o meno correlate con il tema della pagina.
Grassetti e corsivi. Usare i tag strong, em, b e i
Fin dalle prime versioni di HTML, perché un testo apparisse in grassetto, è stato sufficiente inserirlo in un tag <b>, così come per mettere in corsivo una frase si è utilizzato il tag <i>.
Per una costruzione dei documenti più orientata alla semantica e con le versioni più recenti del liguaggio, è stato consigliato di utilizzare <em> per il corsivo e <strong> per i grassetti. Rispettivamente i due tag stavano per emphasis (enfasi) e strong emphasis (forte enfasi) e i browser assegnano loro come stili proprio il corsivo e il grassetto.
Questa seconda scelta certamente sembra più in linea con il principio della separazione tra contenuto e grafica, secondo cui i tag non dovrebbero definire l’aspetto del testo.
D’altra parte in questo modo si è posto un limite alla presenza dei grassetti perché destinati a poche parole molto importanti. Se questo aspetto può avere un impatto positivo anche su un piano di ritmo tipografico, può tendere a omogeneizzare la stesura dei testi.
Come convivono b, i, em e strong
In HTML5 sono state coniugate le due tradizioni, traendo il meglio da entrambe e valorizzando l’importanza di tag come <b> e <i> che si rivelano utili a dare un ritmo al contenuto, senza tralasciare la semantica.
Cerchiamo di capire quindi come utilizzare i diversi tag facendoci aiutare dalla specifica:
In definitiva si perfeziona la capacità espressiva di “strong” e “em”, come pure di “i” e “b”, una volta svincolati dalle definizioni di Italic e Bold. Quanto agli stili, ora sono perfettamente confinati nell’ambito dei CSS.
Esempi di utilizzo dei tag strong, em, b e i
La <strong> cucina < /strong> è la parte più importante della casa…
In questo caso sottolineiamo la parola chiave “cucina” che è la più importante della frase.
La ristrutturazione? Sarebbe ideale avere già tutto
pronto <em> prima del trasloco </em>
Qui poniamo l’accento sul momento in cui completare i lavori a casa.
Anche per piastrelle del bagno una buona scelta è quella
del <i> gres poecellanato </i>
Qui utilizziamo il tag <i> per indicare un termine tecnico.
<b> Ricordi quando ti ho detto che ti avrei ammazzato per ultimo? </b>
Sì,l’hai detto! L’hai detto!
<b> Ti ho mentito. </b>
In questo esempio differenziamo lo stile delle frasi pronunciate da Arnold Schwarzenegger in una celebre scena di “Commando”.
I commenti
Un’altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei“commenti” nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:
<! – – questo è un commento – – >
e ci permette di “commentare” i vari punti della pagina. Ad esempio:
<! – – menu di sinistra – – >
<! – – barra in alto – – >
<! – – eccetera – – >
Contrassegnare la chiusura dei tag: i div
Tra le pratiche più di uso dei commenti, c’è quella di contrassengare la fine di un tag: spesso si tratta di div che definiscono la struttura (layout) della pagina. Aggiungendo un commento che ne riporti l’id, ad esempio, sappiamo sempre in che area stiamo posizionando il nostro codice e rendiamo più leggibile il markup della pagina:
Separare il layout dal contenuto
L’HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio <p>qui il mio testo</p>) e i tag che indicano uno stile o una colorazione del contenuto (ad esempio <font color=”red”>, che colora il testo di rosso) si trovavano mischiati allo stesso livello.
Tuttavia vari anni di Web hanno fatto nascere l’esigenza di separare il contenuto dalla presentazione del contenuto medesimo.
Se per esempio io avessi tutti i titoli del mio documento in rosso e in grassetto, e a un certo punto decidessi di trasformarli in verde e in corsivo, con l’HTML classico (cioè l’HTML 3.2) dovrei andare a modificarmi a mano ogni tag contente le indicazioni della formattazione.
Quindi:
Ma se questa operazione non comporta difficoltà su una singola pagina, diventa insostenibile (o quantomeno difficoltosa, tanto che converrebbe scrivere un programma che effettuasse la conversione al posto nostro) su website molto grandi, a volte di centinaia di pagine.
Proprio per questo – come dicevamo – da un certo punto in poi è nata l’esigenza di separare il contenuto (la scritta “titolo 1”), dalla formattazione (il colore rosso e il grassetto). Per farlo è necessario utilizzare i fogli di stile, e il contenuto della pagina vista pocanzi diventerebbe qualcosa di questo genere:
la colorazione del testo verrebbe affidata alla classe “formattaTitoli”, descritta altrove del documento, o su un file separato. Dunque basta editare la classe “formattaTitoli” per cambiare l’aspetto anche di centinaia di pagine.
È importante sapere da subito che alcune cose che stiamo imparando hanno la possibilità di essere espresse con una soluzione più elegante, e che consente al webmaster di gestire più agevolmente i propri siti. Alcuni elementi descritti nella guida corrente sono addirittura“deprecati”dal W3C, cioè destinati a cadere in disuso (come il tag <font>): man mano che li incontreremo (perché allo stato attuale del Web è ancora importante conoscerli) vi avvertirò che esistono altre soluzioni applicabili tramite i fogli di stile. Tuttavia in questo contesto non esamineremo i fogli di stile (detti anche CSS: “Cascading Style Sheets”), perché è un argomento che presuppone già la conoscenza del linguaggio HTML.
Impostare il colore di sfondo
Incominciamo col vedere come ottenere la nostra prima pagina HTML nel modo in cui desideriamo visualizzarla.
In HTML possiamo impostare un colore di sfondo è utilizzando il relativo attributo del tag body. Così:
<body bgcolor= “blue”>
bgcolor sta per “background color”, cioè “colore di sfondo”. Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese.
In alternativa è preferibile utilizzare lo stile CSS, in quanto il colore di sfondo è una caratteristica estetica della pagina:
<body style= “background – color : blue”>
Qui potete trovare un esempio della pagina con lo sfondo blu
Tuttavia non è consigliabile inserire la notazione del colore facendo riferimento a questo tipo di sintassi, dal momento che non possiamo sapere esattamente a quale tonalità di colore corrisponda il blu del computer dell’utente. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa:
Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti “dark” e “light”, ad esempio: “darkblue”, “lightblue”):
Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Oggi si va da una risoluzione minima di 256 colori a una risoluzione che prevede svariati milioni di colori.
Per capire di cosa stiamo parlando, provate a visualizzare questa pagina: cambiando il numero di colori visualizzati sul monitor. Per fare ciò, in Windows, andate in: Pannello di controllo > Schermo > Impostazioni e cambiate il numero dei colori, applicate i cambiameni e tornate a visualizzare la pagina. Come si vede la visualizzazione della tonalità di colore è sensibilmente diversa passando da 256 a 65.536 colori (16 bit).
Poiché non c’è modo di sapere quale scheda video abbia l’utente (o come l’abbia impostata), i webdesigner per molto tempo hanno fatto riferimento alla “palette sicura” dei 256 colori che sicuramente l’utente è in grado di visualizzare. Si tratta della cosiddetta palette web safe.
C’è però da dire che la stragrande maggioranza dei computer è impostata per visualizzare almeno migliaia di colori, dunque l’utilizzo della palette “web safe” non è più così strettamente necessaria (lo era nei primi anni del web).
Inserire un’immagine di sfondo
Per inserire un’immagine come sfondo è sufficiente utilizzare la seguente sintassi:
<body background= “imgSfondo.gif”>
Per ora presupponiamo che l’immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, vedremo in seguito (quando parleremo delle immagini) come inserire immagini che si trovano in altre cartelle.
L’immagine di sfondo verrà ripetuta in orizzontale e in verticale.
È anche possibile combinare i due attributi, in modo che mentre l’immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina:
<body bgcolor= “#0000ff” background=”imgSfondo.gif”>
Ecco subito un esempio di pagina impostata con lo sfondo.
È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor=”#FFFFFF”). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l’utente ha impostato nella finestra del sistema operativo: quindi se l’utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera.
Se usate Windows, per fare una prova provate a impostare diversamente il tema delle finestre. Dal pannello di controllo: Schermo > Aspetto > Combinazione e poi scegliere:
“nero a contrasto elevato”, oppure “prugna”.
Infine visualizzate questa pagina – che è senza sfondo – e vedrete che la pagina HTML prenderà la colorazione che avete impostato nel tema delle finestre.
Eliminare i margini delle pagine
Abbiamo detto all’inizio che il lavoro del webmaster consiste non soltanto nel conoscere alla perfezione il linguaggio HTML, ma soprattutto nell’essere un esperto del modo in cui i browser visualizzano le pagine.
Negli esempi precedenti avrete notate che il browser – secondo l’impostazione predefinita – lascia un po’ di margine tra la pagina e il bordo della finestra. Questo in alcune situazioni (ad esempio se volete disporre un logo in alto a sinistra) può dare fastidio.
Per eliminare il bordo è sufficiente inserire i seguenti attributi del body:
<body leftmargin= “0” topmergin= “o”>
Questa sintassi funziona correttamente con ogni browser moderno (Internet Explorer, Netscape 6 o superiore, Mozilla, Opera), come è possibile vedere nell’esempio.
Tuttavia è bene sapere che i browser nel corso degli anni hanno introdotto dei tag e degli attributi “proprietari”, con lo scopo di ottenere determinati effetti di visualizzazione, o indicare in qualche modo particolare il contenuto.
Questa situazione capitava soprattutto nei primi anni del web, quando Microsoft e Netscape lottavano per il predominio del mercato: in qualche misura la guerra dei browser è stata anche guerra di tag proprietari, con gravi difficoltà per gli sviluppatori che si trovavano continuamente di fronte a pagine che non venivano visualizzate allo stesso modo.
Per questo motivo fino a qualche anno fa per togliere il margine con Netscape 4.x dovevate inserire:
<body marginleft= “0” margintop= “0”>
Mentre per togliere il margine con Internet Explorer:
<body leftmargin= “0” topmargin= “0”>
Se avrete a che fare con pagine web di altri webmaster vi capiterà spesso di incontrare questo genere di sintassi:
<body leftmargin= “0” topmargin= “0” marginleft= “0” margintop= “0”>
Questa sintassi serviva per eliminare il margine sia con Netscape 4.x, sia con Internet Explorer, specificando tutti e quattro gli attributi.
Al giorno d’oggi potete invece limitarvi a scrivere:
<body leftmargin= “0” topmargin= “0” >
Fortunatamente negli ultimi anni l’ottica della guerra dei browser è cambiata, e i produttori di software sono passati dalla competizione per chi implementa nuove e fantastiche funzionalità proprietarie, al tentativo di rilasciare browser che aderiscano al meglio agli standard del W3C (non è un caso che sia la Netscape, sia la Microsoft facciano parte del consorzio), senza perdere di vista la velocità nell’effettuare il rendering della pagina.
L’adesione agli standard non può che essere un bene, dal momento che potenzialmente significa per gli sviluppatori la stesura di codice “universale”, che funzioni correttamente a prescindere dal browser e dalla piattaforma (speriamo).
Approfondimenti: lo sfondo con i CSS
Tutti gli attributi del tag <body> che abbiamo visto finora (da eccezione dell’attributo lang) servono a modificare caratteristiche che riguardano il layout della nostra pagina HTML. Come si può vedere, con un markup di questo genere:
il layout e il contenuto sono mischiati tra loro. Gli attributi background e bgcolor sono addirittura deprecati nelle specifiche del W3C: significa che andranno perduti.
In un approccio di impaginazione che utilizzi i fogli di stile, l’aspetto che riguarda la visualizzazione deve essere separato dal contenuto.
Il nostro body si ridurrà quindi a qualcosa di minimale, come:
<body lang= “it”>
mentre le regole che indicano come visualizzare lo sfondo saranno visualizzate in una locazione separata del documento.
I fogli di stile sono estremamente potenti, è anche possibile fissare lo sfondo in modo che non si ripeta:
Impostare il colore del testo e dei link per tutta la pagina
Il testo
Se non viene impostato nessun colore per il testo, di default il testo di una pagina è nero.
Tuttavia il nero non sempre è leggibile con tutti i colori di sfondo. Immaginiamo ad esempio di voler utilizzare proprio il nero come sfondo: con la pagina nera e il testo nero non leggeremmo nulla!
Abbiamo allora la possibilità di assegnare un colore per il testo di tutta la pagina, semplicemente utilizzando questo attributo del tag <body>:
<body text= “red”>
Quindi potremo avere, ad esempio:
<body bgcolor= “#0000ff” text= “# ffffff”>
I link
Spiegare che cosa siano i link sembra superfluo, in effetti è l’esperienza della navigazione nel Web ad averci già insegnato che il link è un collegamento, un ponte tra una pagina è l’altra.
Non tutti però sanno che i link testuali hanno diversi stati:
Abbiamo dunque tre stati canonici dei link (link a riposo, link attivo e link visitato) e una condizione aggiuntiva introdotta dai fogli di stile (status del link al passaggio del mouse):
Anche il colore dei link di tutta la pagina può essere tramite gli attributi del body:
I link secondo le impostazioni predefinite sono blu, per cambiare colore:
<body link= “red”>
Per cambiare colore ai link visitati (di default viola):
<body vlink= “green”>
i link visitati vengono memorizzate nella cronologia del browser, quindi se volete ripristinare il colore originario dei link, è sufficiente cancellare la cronologia.
Per cambiare colore ai link attivi:
<body alink= “yellow”>
La sintassi completa per impostare i link è quindi:
<body link= “red” alink=”yellow” vlink= “green”>
the article is very well done, but I want to understand more of the strong tag, em, if you could kindly give me more information.
very well done, I must say, however, that the topic also remains very difficult if I try to understand more and more, I have to recognize that the difficulties are many.
Excellent exposure, I’m trying to understand better what concerns the background with CSS. be able to do more and even better with your help.
good job!!!
Amazing issues here. I am very happy to see your article.
Thanks a lot and I’m taking a look ahead to contact you. Will
you kindly drop me a e-mail?
________________________________
Thank you very much
<<<<<<<<<<<<<<<<<<<
Hi there, this weekend is good designed for me,
because this time i am reading this fantastic informative
post here at my house.
Helpful info. Fortunate me I found your web site by chance, and I’m stunned why this coincidence did not took place earlier!
I bookmarked it.
Great article, totally what I was looking for.
Brief but very accurate information… Many
thanks for sharing this one.
It’s going to be ending of mine day, however before finish I am reading this fantastic post to increase my know-how.
E bellissimo sto blog Giorgia…
______
Grazie
Good day I am so happy I found your web site, I really found you by mistake, while
I was researching on Digg for something else, Anyhow I am here now and would just
like to say many thanks for a marvelous post and a all round thrilling blog (I also
love the theme/design), I don’t have time to read through it all at the moment but I have bookmarked it and also added in your RSS feeds, so when I have
time I will be back to read a great deal more, Please
do keep up the superb b.
Great weblog right here! Also your web site a lot up very fast!
What host are you the usage of? Can I get your affiliate hyperlink on your host?
I want my web site loaded up as fast as yours lol
I think this is one of the so much vital info for
me. And i’m happy studying your article. But want to remark on few basic things, The web site taste is ideal, the
articles is actually excellent : D. Just right task, cheers
Excellent article. Keep writing suchh kind oof information onn yourr site.
Im realloy impressed byy your site.
Hi there, You have done an incredible job.
I will certainly digg it and for my part suggest tto my friends.I’m sure they’ll be benefited from
this website.
Its such as you learn my mind! You appear to know so much approximately this, like
you wrote the guide in it or something. I believe that you could do with a few percent to pressure the
message home a little bit, however instead of that, this is great blog.
A fantastic read. I’ll definitely be back.
I know this web site offers quality depending articles and additional data, is there any other web site which offers these information in quality?
Hi colleagues, pleasant post and fastidious urging commented at this place, I am truly enjoying by these.
Numerous people ԝill be benefited fгom your writing.
Cheers!
It’s actually a nice and useful piece of information. I am happy that you just shared this useful info with us.
Please keep us up to date like this. Thank you for sharing.
Fantastic goods fгom yօu, man. I’ѵe understand ｙοur stuff pгevious to
and yoս’re just too wonderful. I ɑctually ljke ԝhat
yoou have acquired herе, certainlу like what ʏou’rе
stating ɑnd thｅ way in which you say іt. Уou maке it enjtertaining and you still care foｒ to keep it wise.
I сan’t wait too гead much more from уou. This is really a wondrful web site.
____
TY!
Wonderful blog! I found it while surfing around
on Yahoo News. Do you have any tips on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get there!
Cheers
_____
TY!
I simply wanted to say thanks again. I’m not certain the things I would’ve carried out in the absence of these points provided by you regarding such field. It was before a real daunting difficulty in my view, nevertheless considering the very skilled style you treated the issue took me to jump with fulfillment. Extremely grateful for the advice and then expect you comprehend what a great job that you’re putting in training the rest all through your site. Most likely you’ve never met all of us.
Wow, superb blog layout! How long have you been blogging for?
you made blogging look easy. The overall look of your site is wonderful, let alone the content!
—————
Wow, superbo layout del blog! Da quanto tempo bloggi?
Hai reso il blogging semplice. L’aspetto generale del tuo sito è meraviglioso, per non parlare del contenuto!
Woah! I’m really loving the template/theme of this site.
It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user friendliness and
appearance. I must say that you’ve done a great job with
this. In addition, the blog loads very fast for me on Chrome.
Superb Blog!
—————-
Woah! Adoro il modello / tema di questo sito.
È semplice ma efficace. Molte volte è difficile ottenere quel “perfetto equilibrio” tra facilità d’uso e
aspetto. Devo dire che hai fatto un ottimo lavoro con
questo. Inoltre, il blog si carica molto velocemente per me su Chrome.
Blog superbo!
Ho navigato online più di 3 ore oggi, ma non ho mai trovato nessun articolo interessante come il tuo. E ‘piuttosto un valore sufficiente per me. A mio parere, se tutti i proprietari di siti web e i blogger avessero fatto dei buoni contenuti come te, Internet sarebbe molto più utile che mai.
Post molto interessante. Mi sono appena imbattuto nel tuo blog e volevo dire che
mi è piaciuto molto. In ogni caso mi iscriverò al tuo feed RSS e
spero che riscriverai presto!
Great! Thanks for the information!
—————–
Grande! Grazie per l’informazione!
Grandi argomenti,continua così!
My day is ending, however, before I finish, I am reading this awesome post that greatly enriches my knowledge.
————–
La mia giornata sta finendo, tuttavia, prima di finire, sto leggendo questo post impressionante che arricchisce molto la mia conoscenza.
You rеɑlly make it seem so eaѕy with your presentation but
I find this topic to be actually something that I think I would never understand.
It seems toо complicated and extremely broad for me.
I am looking forward for your next post, I will try to get the hang of it!
This design is spectacular! Fantastic. I loved what you said and how you said it! Too cool!
Great items from you friend. You are simply wonderful! I definitely like what you say and the way you say it. I can’t wait to learn a lot more from you, this is truly an amazing site!
Hi, your site is great, I have bookmarked it, it is truly informative, many people will benefit from your writing. Regards!
I like what I see, so I’m following you.
I liked it very much!