Non appena hai messo in piedi il tuo sito, potresti voler effettuare qualche modifica da solo: in generale esistono alcune tipologie di portali e blog, basate su CMS, per le quali esistono degli strumenti appositi (editor integrati) che permettono di modificare alcuni elementi come i contenuti dei post e delle pagine. Per modificare i template , invece, quindi la disposizione degli elementi sulla pagina come footer e widget, bisogna ricorrere agli editor dei temi del sito, cosa consigliata soltanto nel caso in cui si abbia un minimo di pratica con i linguaggi server side come PHP, Perl oppure ASP. In effetti i casi i cui si applicano facilmente queste genere di modifiche riguardano prevalentemente i siti statici, oppure al limite pagine o articoli WordPress dopo averli aperti per la modifica, cliccando sul pannello “testo“, il quale mostrerà il markup HTML che ci interessa.
Bisogna infatti specificare che la resa di una pagina WEB sul browser è in genere differente da quella che potremmo ottenere, di fatto, modificando il testo mediante un programma come Word o OpenOffice/LibreOffice: in questi ultimi casi il testo sarà direttamente formattato, mentre nel caso di HTML (che non è un vero e proprio linguaggio bensì un markup, ovvero possiede un “doppio livello” di resa finale nel browser e codice per attivarlo) dovremo familiarizzare, come vedremo a breve, con il concetto di “tag”.
Quello che riporteremo in questo articolo sono le modifiche che potete effettuare in particolare sui siti statici, ovvero quelli che non devono essere cambiati frequentemente, e che potete modificare in due modi diversi:
- agendo sui file .HTML direttamente dall’editor di cPanel;
- agendo sui file .HTML mediante un client FTP.
Cos’è un tag HTML?
Un tag HTML non è altro che un frammento di codice che indica come il testo della pagina debba essere formattato, oppure ne focalizzi la tipologia (ad esempio un grassetto, un link o un titolo): in generale esso è riconoscibile poichè si tratta di parole chiave racchiuse tra i caratteri < e >, che normalmente possiede un elemento di apertura (ad esempio <a>) ed uno di chiusura (ad esempio </a>). Esiste anche un ulteriore livello di formattazione che è contenuto nei fogli di stile CSS (Cascading Style Sheets), che indicano al browser colore, dimensione, forma e layout di un certo elemento, e di cui per semplicità non ci occuperemo in questa sede.
Dove posso modificare il markup HTML?
All’interno di un CMS come WordPress, ad esempio, è possibile trovare degli editor in tutto e per tutto simili a quelli di Word e simili, che mostra un livello “design” o “visuale”, ed uno ulteriore definito come “testo”, “codice” o “HTML view”. Dopo aver effettuato le modifiche all”interno del secondo livello citato, sarà possibile vedere subito le modifiche effettuate all’interno del primo.
Grassetto
Per rendere grassetto (bold) una parte di testo si può utilizzare il tag HTML <strong>: se volessimo rendere un testo come “Questo è un grassetto” dovremmo quindi scrivere, lato HTML:
<strong>Questo è un grassetto</strong>
Corsivo
Per rendere corsivo (italic) una parte di testo si può utilizzare il tag HTML <em>: se volessimo rendere un testo come “Questo è un corsivo” dovremmo quindi scrivere, lato HTML:
<em>Questo è un corsivo</em>
Link
Per rendere cliccabile (italic) una parte di testo si può utilizzare il tag HTML <a>, con l’utilizzo dell’attributo href: se volessimo rendere un testo come “Questo è un link al blog di Keliweb” dovremmo quindi scrivere, lato HTML:
<a href="https://blog.keliweb.it">Questo è un link al blog di Keliweb</a>
Se desideriamo che il link sia aperto in una pagina a parte per il visitatore, dovremo aggiungere l’attributo target settato a _blank, ovvero:
<a href="https://blog.keliweb.it" target="_blank">Questo è un link al blog di Keliweb che si apre in una finestra a parte</a>
Se infine desideriamo che Google non conteggi quel link a fine del PageRank (TM), è stato introdotto l’attributo apposito nofollow che si scrive in questo modo:
<a href="https://blog.keliweb.it" rel="nofollow">Questo è un link nofollow</a>
Esistono anche ulteriori attributi per il tag <a> che comunque, a livello molto basilare, non sono di interesse per il webmaster: dal punto di vista di resa visuale non cambia nulla nei tre casi.
Aggiungere un’immagine
Per aggiungere un’immagine bisogna prima di tutto caricarla sul server, cosa che usualmente si effettua con un modulo di upload. Fatto questo dovremo prendere nota del path dell’immagine e copiarlo all’interno dell’attributo src del tag img, il quale possiede come singolare caratteristica, a differenza dei precedenti, che non richiede di essere chiuso esplicitamente, a patto di scriverlo in modo adeguato.
Esempio: logo Keliweb
<img src=”https://blog.keliweb.it/wp-content/uploads/2013/06/logo1.png”>
Si raccomanda, per una questione di usabilità, l’utilizzo dell’attributo alt per far “capire” di cosa si tratta in caso l’immagine non caricasse o fosse stata nel frattempo rimossa:
<img alt="logo di Keliweb" src=”https://blog.keliweb.it/wp-content/uploads/2013/06/logo1.png”>
Se infine volessimo rendere cliccabile l’immagine dovremmo includere la stessa tra i tag <a> visti in precedenza:
<a href=”https://blog.keliweb.it”><img src=”https://blog.keliweb.it/wp-content/uploads/2013/06/logo1.png”></a>
Un commento