Guida all'HTML e al CSS con ebook gratuito da scaricare

Molti lettori di questo sito, specialmente quelli che lo seguono da molto tempo, sono colleghi blogger che vi hanno spesso trovato dei suggerimenti per una migliore gestione dei loro blog su varie piattaforme, specie quella Blogger.

In linea di massima si possono creare dei siti anche senza conoscere i linguaggi di programmazione che sono alla base della progettazione delle pagine web. Infatti praticamente tutti i CMS, cioè tutte le piattaforme che offrono servizi per pubblicare contenuti testuali online, mettono a disposizione degli utenti degli editor WYSIWYG.

Si tratta dell'acronimo della espressione inglese What You See Is What You Get che si potrebbe tradurre come Quello che vedi è quello che ottieni. In pratica l'utente che vuole pubblicare una pagina web avrà a disposizione un editor che ricorda Word di Office o Documento Writer di Libre Office anche se con meno funzionalità.

Come allineare 2, 3 o più foto in un post

Negli Editor di Blogger e Wordpress ci sono i pulsanti per scegliere l'allineamento delle immagini. Si possono mostrare sulla sinistra, sulla destra o al centro. Inoltre si può decidere se la foto aggiunta possa essere o meno contornata dal testo della pagina web.

Per visualizzare le immagini, senza niente da entrambi i lati, si usa la proprietà display:block; mentre, per mostrala integrata nel testo, il tag da usare è display:inline;. Non ci sono invece pulsanti per allineare due, tre o più immagini e d'altra parte sarebbe davvero difficile crearli. 

In questo post vedremo come procedere per mostrare delle foto allineate. In teoria non ci sono limiti per il numero di immagini che si vogliono allineare. L'unico vincolo è quello della larghezza del layout della pagina web che deve essere naturalmente inferiore alla somma delle larghezze delle foto, sommate allo spazio da mettere tra le stesse.

Mostrare nei post riquadri per ricette o schede tecnologiche con foto

Uno dei fattori di grande novità nell'algoritmo di Google è quello dei rater, o valutatori detto in italiano, che sono persone reali che aprono effettivamente le pagine dei siti e che danno una valutazione sulla validità dei contenuti, sulla facilità di navigazione e su altri fattori riguardo alla loro esperienza di lettori.

Questi dati vengono poi elaborati da Google per premiare i siti che offrono contenuti ben confezionati e per penalizzare quelli che invece scrivono post senza curarsi troppo dei lettori ma con l'unico scopo di ben posizionarsi nei risultati dei motori di ricerca.

Ho illustrato queste tematiche nell'articolo su come affrontare gli aggiornamenti principali dell'algoritmo, denominati Google Core Update. Una prima risposta a questa esigenza è quella di aggiungere un numero adeguato di immagini ai post, per facilitarne la comprensione da parte dei lettori. Un altro modo per avere delle buone valutazioni è quello di inserire video tutorial negli articoli che illustrino visivamente il tema senza che siano necessariamente stati pubblicati da noi su Youtube.

Mostrare un tooltip personalizzato al passaggio del cursore su una foto

Quando si pubblica una immagine in una pagina web, oltre al suo URL diretto, si possono opzionalmente inserire altri parametri come attributi, quali la larghezza, l'altezza e il bordo.

Dal punto di vista SEO, è fondamentale l'attributo Alt, ovvero il Testo Alternativo, che serve per digitare un titolo o una descrizione testuale della foto, che verrà mostrato dal browser a chi apre la pagina qualora l'immagine non si possa caricare o se sia troppo lenta a farlo.

Meno importante per i motori di ricerca, ma particolarmente utile per i navigatori, è il tag Title, che serve sempre per digitare un titolo o una descrizione della foto ma che il lettore visualizza come tooltip, quando passa con il mouse sopra alla immagine.

Testo e immagini scorrevoli da mostrare in un sito

Nell'HTML esiste il tag <marquee> che serve per far scorrere testo e immagini; il testo può anche essere formattato e si può impostare la velocità di scorrimento e il suo verso scegliendo una delle quattro direzioni.

In realtà il tag <marquee> è stato deprecato dal consorzio W3C, l'istituzione che si occupa della purezza del linguaggio di programmazione, svolgendo una attività che ha delle similitudini con quello che fa l'Accademia della Crusca nei confronti della lingua italiana. 

Sebbene deprecato, il tag <marquee> continua a essere usato regolarmente dagli webmaster di tutto il mondo per la sua semplicità d'uso e, quello che è più importante, viene regolarmente supportato da tutti i browser.

Abbiamo già visto alcune applicazioni di tale tag quali quella per aggiungere i titoli scorrevoli alla fine di un video, con lo stesso stile dei crediti di attribuzione che si vedono al cinema. In un prossimo articolo vedremo invece come creare un widget che mostri gli ultimi titoli del sito che scorrono dal basso verso l'alto.

Creare elenchi personalizzati su più colonne

Chi scrive nel web si trova spesso nella esigenza di dover inserire degli elenchi nella pagina che sta editando. Gli elenchi possono essere aggiunti direttamente tramite pulsanti degli editor, perché sono universalmente supportati.

Solitamente l'utente ha a disposizione due bottoni, uno per gli elenchi puntati e uno per quelli numerati. I primi aggiungeranno i vari elementi preceduti da un puntino mentre i secondi ne mostreranno il numero di ordine.

Gli elenchi puntati inizieranno con il tag <ul> mentre quelli numerati con il tag <ol>. Per aggiungere i vari elementi si va su Invio nella tastiera. Al posto dei numeri, si possono mostrare le lettere latine, quelle greche e si possono creare elenchi nidificati con una o più voci dell'elenco, che a loro volta contengono un altro elenco.

Come per esempio nell'elenco dei capitoli dell'indice di un ebook a loro volta suddivisi nell'elenco delle sezioni degli stessi capitoli. Gli elenchi così creati possono anche essere personalizzati nell'aspetto impostandone il colore dello sfondo, il colore del testo, la famiglia di font, la dimensione dei caratteri, ecc.

Negli editor HTML non esiste la possibilità di creare elenchi su più colonne che invece è utile per risparmiare spazio. Poniamo che gli elementi di un elenco siano molto brevi e formati da una sola parola di poche lettere. In compenso siano invece parecchi gli elementi da mettere in elenco. Con gli editor classici si finisce per mostrare un elenco molto lungo con notevole spreco di spazio. Sarebbe molto più pratico inserire gli elenchi in colonne.

Testo e immagini lampeggianti con CSS o javascript

Con l'ausilio di programmi di grafica come Photoshop o Gimp si possono creare delle immagini animate in formato GIF allo scopo per esempio di creare dei pulsanti lampeggianti.

Nel linguaggio HTML esiste pure il tag blink per creare testo lampeggiante, un tag che però è stato deprecato da diverso tempo. In questo post vedremo come creare del testo e delle immagini lampeggianti tramite il linguaggio CSS3 e con il javascript.

La scelta del CSS3 è migliore di quella del javascript, perché non rallenta in modo significativo l'apertura della pagina da parte dei navigatori. Questa personalizzazione può essere interessante per evidenziare un particolare paragrafo e per incentivare i click su un elemento. Per maggiore chiarezza dividerò il post in 4 sezioni: testo lampeggiante con i CSS, immagini lampeggianti con i CSS, testo lampeggiante con i javascript e testo lampeggiante con i javascript. Inserirò anche dei collegamenti e del testo formattato di esempio che naturalmente possono essere adattati alle singole esigenze o sostituiti da testo piano. Il tag target="_blank" serve unicamente per far aprire i collegamenti in un'altra scheda e può essere tralasciato.

Come centrare un oggetto HTML

Chi possiede un sito o un blog, si trova spesso nella necessità di inserire in modo simmetrico, nel layout della pagina o in un articolo, un particolare oggetto HTML che può essere un testo, una immagine, un video, un iframe o una tabella. In verità quando si parla di centrare un oggetto dovremmo specificare meglio se si tratta di centrarlo orizzontalmente o verticalmente.

Inserire un oggetto centrato verticalmente ha significato solo se si inserisce dentro un contenitore, lasciando lo stesso spazio in alto e in basso. Centrare un oggetto orizzontalmente ha invece sempre senso e consiste nel lasciare lo stesso spazio alla sua sinistra e alla sua destra.

Chi non ha neppure una infarinatura del linguaggio HTML, può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS, in cui sono spiegati i fondamenti di questi due linguaggi di markup. Per maggiore chiarezza ho diviso la trattazione del tema in più sezioni e mostrerò gli screenshot dei codici utilizzati incollati nell'Editor online Real Time HTML  che mostra il rendering del codice nella parte bassa della pagina.

Come mostrare bordi diversi in uno o più lati di un elemento HTML

I bordi sono un elemento grafico presente in molte pagine web e vengono inseriti con dei tag ben codificati. Si possono aggiungere bordi a un contenitore come a una immagine e, con qualche accortezza, anche ai player dei video.

Riepilogo brevemente quali sono le regole per aggiungere un bordo con un CSS inline, per esempio in una immagine. Si usa un codice come questo <img style="border: dotted #f00; 4px;" src="URL_IMMAGINE"/>, dove i tag colorati di rosso sono quelli che determinano l'aspetto del bordo.

Il primo attributo (dotted) indica che il bordo sarà punteggiato, il secondo (#f00) ne determina il colore con il suo codice e infine il terzo (4px) ne configura lo spessore.

Creare sfondi con gradiente e a strisce orizzontali o verticali con i CSS

Oggi ci divertiremo un po' con i CSS per creare degli sfondi colorati non omogenei, in cui inserire del testo o delle immagini da evidenziare in un modo originale. Per esempio si possono inserire i testi di alcuni articoli della Costituzione Italiana in uno sfondo con i classici colori tradizionali verde, bianco e blu.

Partiremo dalla situazione più semplice per poi mostrare delle personalizzazioni sempre più sofisticate. Chi non avesse sufficiente dimestichezza con i linguaggi HTML e CSS, può scaricarsi gratis il mio ebook dal titolo Guida all'HTML e al CSS, in cui troverà informazioni propedeutiche ma sufficienti per avvinarsi a questi linguaggi di markup.

Nel seguito del post vedremo come creare un rettangolo in cui avere uno sfondo di un solo colore o con una sfumatura di colore ovvero con quello che si chiama Gradiente. All'interno del rettangolo potremo poi inserire del testo, anche formattato, immagini o altri oggetti HTML.

Come aggiungere emoji nel Tema di blogger - in menù, widget, ecc...

Qualche giorno fa ho ricevuto un commento su un post in cui illustravo come installare un menù orizzontale su più livelli. Il lettore aveva provato a modificarlo aggiungendo delle immagini al testo delle voci del menù.

Il risultato non era stato completamente di suo gradimento e mi chiedeva se si poteva risolvere in qualche modo. Cominciamo a fare delle considerazioni preliminari. Innanzitutto conviene andarci cauti con l'inserimento delle immagini, perché rallentano parecchio il caricamento delle pagine. In seconda battuta sarebbe importante usare i CSS Sprite per minimizzare le richieste HTTPS da parte del browser.

In questo post vedremo appunto come aggiungere delle icone a degli elementi del nostro blog su Blogger, che possono essere dei menù oppure dei widget o altri oggetti HTML, che sono stati aggiunti al nostro modello mediante un codice. La soluzione che propongo è quella di aggiungere delle icone usando i loro codici Unicode.

Come inserire in un testo esponenti (apici) e pedici

Non tutti gli Editor di testo supportano nativamente le funzioni di apice e pedice che sono essenziali per esempio per digitare formule di chimica, ma anche per mostrare con la normale notazione delle potenze con base e esponente.

Gli Editor WYSIWYG di Blogger, ma anche di Wordpress, non hanno i pulsanti per aggiungere apici e pedici. Sono invece presenti nei programmi desktop Word e LibreOffice. Ricordo che WYSIWYG è l'acronimo della espressione inglese What You See Is What You Get, tradotto in italiano potrebbe diventare "quello che vedi è quello che ottieni".

Gli Editor di questo genere permettono di creare del testo formattato o rich text senza conoscere il linguaggio HTML ma soltanto usando gli appositi pulsanti che lo creeranno automaticamente. Andando su Scrivi, dopo aver aperto l'Editor di Blogger, si visualizzeranno i bottoni per il grassetto, il corsivo, il sottolineato, il barrato, inserisci intervallo, allineamento, elenchi, controllo ortografico, colore del testo, colore di evidenziazione, simboli speciali, citazione, famiglia e dimensione dei caratteri.

Come trovare le tonalità più chiare e più scure di un colore

Nei lavori di grafica e nel web design, si possono importare dei concetti usati da anni nella pittura, dove esiste il concetto di colore puro, cioè senza l'aggiunta di pigmento bianco o nero per schiarirlo o per scurirlo.

Nel precedente post abbiamo visto come oltre alla rappresentazione RGB, per i colori si possa scegliere anche il modello HSB, o HSL o HSV che individua i colori con i valori di Tonalità, Luminosità e Saturazione. Esiste anzi una corrispondenza biunivoca tra i valori delle terne RGB e quello delle terne HSL.

La domanda a cui voglio rispondere con questo post è la seguente: "Come si fa ad aggiungere del bianco o del nero a un colore a partire dal suo codice?" Ovvero, se si conosce il codice di un colore, quali sono i codici del colore più scuro di una o due tonalità o il codice del colore più chiaro di tre o quattro tonalità?

La ricerca di colori più scuri o più chiari è importante quando si voglia creare per esempio un bottone con un effetto di rilievo. Tramite il gradiente, si inserisce un colore più chiaro nella parte alta e uno più scuro nella parte bassa, proprio per inserire un effetto di luminosità in alto.

Cosa sono i codici ASCII e Unicode e come usarli con l'HTML

Come certo saprete l'unità della informazione è il bit che permette di discernere tra due eventi ugualmente probabili. Il bit è una cifra binaria e solitamente si utilizza il byte che è formato da 8 bit e che può quindi assumere 2⁸ = 256 valori possibili. Nelle notazioni solitamente si usa la b piccola per il bit e la B grande per il byte. Vengono utilizzati anche i loro multipli Kb, Mb per Kilobit e Megabit e KB e MB per Kilobyte e Megabyte.

Nei nostri dispositivi come computer e cellulari non vediamo però solo numeri, ma anche lettere e caratteri speciali oltre a molte altre cose. Esiste quindi un meccanismo di corrispondenza tra numeri e caratteri all'interno dei computer con delle tabelle che sono uno standard internazionale.

La tabella più conosciuta è quella ASCII, acronimo di American Standard Code for Information Interchange, che è appunto un codice per la codifica dei caratteri. Tale tabella comprende 256 caratteri, tutti quelli rappresentabili con un byte. Tale tabella però non era sufficiente neppure per i caratteri delle lingue europee più comuni visto che devono essere rappresentati anche i caratteri di lettere accentate.

Codici dei colori HEX e RGB in italiano

Che codice HEX, RGB, CMYK o HSV ha il colore albicocca? La questione non interessa un utente medio di internet ma può essere motivo di grattacapi per un blogger dilettante, o anche per un creatore professionista di layout, se il cliente gli ha chiesto uno sfondo proprio di quel colore per un elemento di una pagina web.

Ricordo che i codici dei colori sono una rappresentazione univoca di tutti i colori del visibile. Possono essere riprodotti tutti a partire da dei colori di base, mischiandoli in tutti i modi. Un insieme di tre o quattro colori che è in grado di riprodurre tutti gli altri è detto insieme di colori primari.

Sono stati proposti vari insiemi di colori primari e, ciascuno di essi, ha dato modo di creare un modello di rappresentazione. Quello più conosciuto è il RGB (Red, Green, Blue ovvero Rosso, Verde e Blu) ma c'è anche il CMYK (Cyan, Magenta, Yellow, Key black ovvero Ciano, Magenta, Giallo e Key Black per sistemi di stampa particolari). Per individuare un colore, occorre quindi scegliere il modello e il numero di colori che si vogliono rappresentare.

Al momento la rappresentazione dei colori più comune utilizza 24bit, cioè 8bit per ciascun colore, con un numero complessivo di 2⁸=256 possibili valori per il Rosso, Verde e Blu. Le combinazioni totali realizzabili sono quindi 256³= 16.777.216. Con più di 16 milioni di colori si possono creare più sfumature di quelle che l'occhio umano riesce a  percepire. Con una rappresentazione di colori a 32bit vengono aggiunti altri 8bit per la trasparenza che ci ha permesso di aggiungere il Canale Alfa.

Come creare uno stile personalizzato con i CSS

Le piattaforme utilizzate per la creazione di siti come Blogger e Wordpress, offrono diversi strumenti per personalizzare alcuni aspetti dei Temi in generale e, in particolare, per quello che concerne il corpo della pagina, come il colore del testo, le dimensioni dei caratteri, la famiglia di font, il colore dei link.

Nella realizzazione di un articolo, potrebbero però sussistere delle esigenze particolari per evidenziare in modo diverso un dato paragrafo, che si ripete in più articoli. In questo sito per esempio ho creato uno stile per il codice, uno stile per le intestazioni, uno stile per un elenco e uno stile per una tabella responsive.  Ricordo anche un interessante post che ho dedicato alla personalizzazione dello stile delle citazioni nei blog letterari.

In questo articolo vedremo come creare uno stile personalizzato per dei paragrafi di testo che vogliamo evidenziare in modo efficace e riprenderò il tema della creazione di uno stile per pubblicare codici di linguaggi di programmazione in modo da renderli immediatamente riconoscibili rispetto al resto dei contenuti.

6 tool per testare online i codici HTML, CSS e Javascript

Chi si occupa di pubblicazione sul web ha spesso a che fare con i linguaggi di programmazione di cui deve testare i codici prima di inserirli in un post, in un Tema o in una pagina web.

I linguaggi per il web sono diversi e vanno dal Javascript al Python ma il linguaggio che li riunisce tutti è quello denominato HTML giunto alla versione HTML5. Tale linguaggio è quello che viene riconosciuto dai browser e che permette loro di effettuare il rendering del codice di una pagina web per mostrarne il layout risultante.

Per rispondere alla domanda su come verrà mostrato dal browser un determinato codice esistono gli Editor professionali che servono appunto per creare le pagine web ma, per le piccole esigenze di un webmaster, sono eccessivi e poco pratici. Ci sono infatti molti Editor HTML online che ci mostrano in tempo reale come verrà visualizzato un oggetto HTML incollandone il relativo codice in una sezione dell'Editor.

Come creare una tabella Responsive con HTML e CSS.

Le tabelle sono un oggetto HTML molto usato nelle pagine web. Sono utili per mostrare schede di tecnologia come informazioni su film e serie TV. Vengono inoltre utilizzate per comparazioni di ogni genere e sono generalmente presenti in molti siti web compresi i blog.

Il codice HTML per generare una tabella è piuttosto semplice e ha solo bisogno di alcuni parametri fondamentali che sono il numero di righe, il numero di colonne, la distanza tra le celle, la distanza del contenuto dal bordo della cella e la larghezza della tabella.

Ci possono poi essere tag opzionali per formattare i contenuti all'interno delle celle, per inserire uno sfondo e per mostrare la riga dell'intestazione in modo diverso da quelle della tabella vera e propria.

Se nella tabella sono presenti i valori assoluti della sua larghezza questi, se sono stati calcolati per la versione desktop, mostreranno la tabella tagliata nella versione mobile in caso di larghezza superiore a quella della risoluzione del dispositivo. In questo post vedremo come creare una tabelle responsive passo dopo passo che sarà visualizzata nello stesso modo da desktop e da mobile.

HTLML DI UNA TABELLA

I tag essenziali di una tabella sono <table> per iniziare la tabella, <tr> per l'inizio della riga, <td> per l'inizio della cella insieme alle loro chiusure </table>, </tr> e </td>. I contenuti delle celle della tabella sotto forma di codice HTML vanno inseriti tra i vari tag <td> e </td>. Viene anche usato il tag <tbody> che indica il corpo della tabella. I tag <thead> e <tfoot> non incidono nel layout della tabella e servono quando ci sia da aggiungere una parte alta, per esempio per la descrizione e una parte bassa, per esempio per delle considerazioni.

Come creare una tabella online con HTML e CSS.

Gli Editor WYSIWYG ovvero What You See Is What You Get (ottieni quanto vedi in italiano) che sono disponibili per Blogger e per Wordpress non hanno dei bottoni per aggiungere una tabella ai post. La soluzione di usare Open Live Writer non è più facilmente praticabile perché non viene più mostrata l'anteprima della tabella in tale Editor rendendo difficile la sua realizzazione.

Molte tipologie di siti hanno spesso l'esigenza di pubblicare tabelle. Sono utili per schede tecniche di prodotti tecnologici ma anche per articoli di genere diversissimo. Una soluzione potrebbe essere quella di usare un Editor CSS gratuito come BlueGriffon che però dovrebbe essere installato nel computer.

Un'alternativa interessante è quella di usare strumenti online specifici per creare tabelle. In sostanza si impostano i parametri come il numero di righe, il numero di colonne, lo spazio tra le celle, il padding all'interno delle celle, la presenza o meno del bordo e il suo stile, la larghezza in pixel o in percentuale. Si digita il contenuto per poi ottenere il codice HTML da incollare nella pagina web in cui inserire la tabella.

Aggiungere ombreggiatura a testi, oggetti e immagini con HTML e CSS.

Nel precedente post abbiamo visto che con i linguaggi HTML e CSS si possono creare dei bottoni professionali completamente personalizzabili.

In alcuni di quei bottoni abbiamo visto come si possa aggiungere anche una ombreggiatura sia al testo sia al bottone per dare una forma tridimensionale. Ho quindi pensato di riprendere questo tema che avevo già affrontato qualche anno fa aggiungendovi altri dettagli.

La gestione delle ombreggiature ha avuto un grande sviluppo con l'introduzione del linguaggio CSS3 che h implementato tale funzionalità. In precedenza solo il browser Opera supportava nativamente l'ombreggiatura e fino a poco fa dovevamo aggiungere una riga di codice per tutti i browser affinché mostrassero anche le ombre.