Un link non è altro che un "collegamento" a qualcos'altro, l'uso più comune che si fa di un link è quello di metterlo all'interno di una o più parole per fare riferimento a una pagina del proprio sito o a quella di un sito esterno ed a seconda dell'uso che se ne deve fare bisogna modificarlo inserendo alcuni tag per ottimizzarlo (alt, title, nofollow, target). I due casi precedentemente citati comportano lo spostamento da una pagina all'altra, ovvero il browser si aggiornerà e caricherà la nuova pagina ma questo non è l'unico modo per inserire link che infatti si possono inserire all'interno dei singoli paragrafi dell'articolo. Un link interno non aprirà una nuova pagina e non farà aggiornare il browser dopo il click ma più semplicemente andrà ad aggiungere nel link presente sulla barra indirizzi del browser un cancelletto (#) seguito da una parola che va assegnata manualmente per ciascun link interno.

Per porvi l'esempio di un sito importante che utilizza perfettamente i link interni ai paragrafi contenuti dentro l'articolo vi consiglio di visitare questa pagina di Wikipedia, come potete vedere è presente l'indice numerato e se cliccate su una delle parole presenti vi sposterete verso il basso precisamente nella posizione assegnata. Questa operazione permette di rendere i testi lunghi meno noiosi facilitandone la ricerca di determinati argomenti; per dirla più semplice sono come le linguette delle rubriche telefoniche, dove basta aprire la pagina con la linguetta M per ritrovare tutti i numeri di telefono con l'iniziale del cognome con la M.

Per creare link interni dentro la stessa pagina si deve utilizzare la modalità HTML del post e poi andare ad inserire in una posizione alta e ben in vista della pagina, il proprio indice, simile a quello di Wikipedia:

<a href="#Link1">1° Testo</a>
<a href="#Link2">2° Testo</a>
<a href="#Link3">3° Testo </a>
<a href="#Link4">4° Testo</a>
<a href="#Link5">5° Testo</a>

Questi appena inseriti saranno i  link numerati che il lettore dovrà cliccare per eseguire gli spostamenti; il testo che vedrà sarà: 1° Testo, 2° Testo, 3° Testo... e quindi dovete modificare le scritte per renderle più adatte al contesto.

Il link deve condurre ad un punto ben preciso della pagina, questo punto di destinazione dovete assegnarglielo voi, inserendo in maniera opportuna sempre nell'HTML prima di un paragrafo (e quindi non uno sotto l'altro) i seguenti codici:

<a name="Link1">1° Testo</a>
<a name="Link2">2° Testo</a>
<a name="Link3">3° Testo</a>
<a name="Link4">4° Testo</a>
<a name="Link5">5° Testo</a>

Questa procedura va bene per tutte le piattaforme ma per quanto riguarda Blogger bisogna fare solo attenzione nel salvare e nel riaprire il post perché in entrambi i casi va usata la modalità HTML, in caso contrario le scritte dopo il simbolo cancelletto si trasformeranno in link non funzionanti che poi dovranno essere rimossi uno per uno

Continua a leggere »

Normalmente quando leggiamo un articolo interessante su internet troviamo all'interno di esso delle parole cliccabili, queste come certamente sapete si chiamano link e sono stati inseriti dentro il testo. Un link si può inserire anche all'interno di una immagine, per esempio chi deve creare le icone per i social network e deve far corrispondere per ogni icona la pagina social del proprio sito utilizza proprio questo metodo, altri utilizzi potrebbero essere la pubblicizzazione di un siti amici creando banner per lo scambio visite oppure per mettere in evidenza una sezione specifica del proprio sito che magari è nuova e quindi poco conosciuta ai lettori.

Se la clicchi verrai spostato nella pagina iniziale.

Codice Immagine con Link

Il codice seguente vi permetterà sostituendo opportunamente le parti in rosso rispettivamente il link del sito e con il link dell'immagine di inserire un'immagine con dentro un link.

<a href="Indirizzo della pagina"><img src="link dell'immagine"/></a>

Codice per Immagine Ottimizzato SEO

Il codice precedente può andare bene per immagini usa e getta ma se invece dovete lasciarle per molto tempo o per sempre, è buona norma inserirle in maniera ottimizzata aggiungendo il tag alt (sarebbe la descrizione) ed il tag title (il titolo dell'immagine che appare passando il mouse sopra l'immagine); il tag alt è più impostante rispetto al tag title.

<a href="Indirizzo della pagina"><img src="link dell'immagine" alt="nome-foto" title="Titolo della foto"/></a>

Codice per banner di siti amici e affidabili

Se avete più di un sito e volete pubblicizzarli tra di loro dovete inserire all'interno del codice html il tag target="_blank" che apre i link che siano dentro il testo o dentro una immagina in una nuova finestra in modo che il lettore non perde di vista il sito primario.

<a href="Indirizzo della pagina" target="_blank"><img src="link dell'immagine" alt="nome-foto" title="Titolo della foto"/></a>

Codice per banner di Siti Sconosciuti o malevoli

Entrambi i codici scritti in precedenza vanno bene per linkare pagine interne del proprio sito ma se inserite link di altri siti è "quasi" d'obbligo utilizzare il Rel="nofollow" all'interno del codice html dove è presente il link del sito collegato all'immagine perché se questi un giorno dovessero contenere virus o non funzionare più è probabile che anche il vostro sito subisca tale penalizzazione con conseguente perdita di posizioni su Google; ho messo un caso drastico ma meglio prevenire che curare soprattutto con siti sconosciuti. Il codice più sicuro è:

<a href="Indirizzo della pagina" target="_blank" rel="nofollow"><img src="link dell'immagine" alt="nome-foto" title="Titolo della foto"/></a>

Ricordo che questi sono codici di esempio e che vanno sostituiti i link col testo che ho messo come esempio all'interno delle virgolette. Inoltre i codici precedenti non escludono i successivi ad esempio nell'ultimo codice inserito non ho messo i tag alt e tile ma potete aggiungerli manualmente copiandoli dai codici precedenti.

Continua a leggere »

Chi utilizza l'editor WYSIWYG può spostare un elemento senza utilizzare alcun codice, semplicemente selezionando l'elemento e cliccando sui bottoni di allineamento, non sempre però tali modifiche vengono riconosciute alla perfezione o ci possono essere altre esigenze più specifiche che necessitano l'uso dell'HTML per centrare degli elementi ben precisi tralasciandone invece altri.

Il metodo più diffuso per centrare è quello di racchiudere il testo dentro il paragrafo <p> aggiungendogli align="center" nel modo seguente:

<p align="center">Il mio testo</p>

Per l'allineamento a sinistra occorre sostituire center con left:

<p align="left">Il mio testo</p>

Per l'allineamento a destra si deve sostituire center con right:

<p align="right">Il mio testo</p>

Questo metodo crea dei paragrafi e quindi lascia una riga vuota alla fine che potrebbe essere antiestetica nella maggior parte dei casi; per ovviare a questo inconveniente si può racchiudere in un div qualsiasi elemento, quindi non solo testo vero e proprio (per solo testi è consigliato il metodo precedente) ma anche immagini, video, tabelle ecc.

<div align="center">Il mio testo</div>

Esiste un ulteriore metodo per centrare usando l'HTML ed è quello di utilizzare il tag  center, è più semplice da ricordare perché è costituito da una sola parola e dai tag di apertura e chiusura ma il sito W3C ne sconsiglia il suo utilizzo anche perché non viene riconosciuto nei linguaggi XHMTL, a livello informativo il codice da usare è il seguente:

<center>Il mio testo</center>

In tutti i casi potete ricopiare i codici da qui e sostituire la parola rossa Il mio testo per inserire un vostro testo personalizzato. Come già detto oltre al testo potete centrare anche un'immagine ed il codice da inserire dentro i tag è:

<div align="center"><img src=”Link-Immagine”></div>

Se volete centrare un link contenuto dentro un testo il codice da utilizzare è quest'altro:

<p align="center"><a href="LINK" target="_blank">Il mio testo</a></p>

LEGGI ANCHE: Come centrare uno script

Continua a leggere »

I bottoni o pulsanti servono per mettere in risalto un determinato passaggio da una pagina all'altra o per confermare un qualcosa. Si è soliti trovarne uno con la scritta "download" sotto un file che deve essere scaricato da internet, o per esempio ne si può trovare un altro per vedere la demo di un'applicazione online. Per crearne un bottone conviene affidarsi ai soliti programmi di grafica ma per i meno esperti ricordo che si possono creare bottoni tramite codice HTML. Proprio in questo articolo vi spiegherò come inserire un bottone senza link, con link e colorato.

Il codice qui sotto, in HTML permette di creare un bottone in modo molto semplice, però questo anche se cliccato non porta in nessuna pagina, ha solo uno scopo estetico.

<button> Testo </button>

Il bottone può, come già detto, condurre in una pagina web differente da quella in cui ci si trova, sempre nella modalità HTML bisogna inserire un codice differente:

<a href="URL DEL COLLEGAMENTO"><button>Testo</button></a>


Utilizzando il primo codice, una volta cliccato il bottone lascerete la pagina in cui vi trovate e verrete reindirizzati nella nuova pagina e questo non è un bene in ottica SEO perché più tempo una persona lascia aperta la pagina del vostro sito e meglio sarà. Per questo motivo vi conviene scartare il codice precedente e di utilizzare quello qui sotto che possiete l'attributo target blank.

<a href="http://www.scuolissima.com" target="_blank"><button>Testo</button></a>

Se volete un bottone colorato  dovrete utilizzare il codice sottostante, ovviamente il colore potete modificarlo a vostro piacimento, sostituendo quel verde che ho inserito con un altro colore esadecimale.

<a href="http://www.scuolissima.com/" target="_blank" title="Scuolisima"><input name="button" value="Bottone colorato" style=" color:#191919; background-color: #00CC00;" type="submit"></a>

Per soluzioni più professionali vi conviene utilizzare qualche sito che permette di creare un bottone con molti più dettagli grafici.

Continua a leggere »

Un sito che permette di trasformare il codice HTML in altri tipi di linguaggi scripting come il PHP, Javascript e Asp è Yellowpipe. E' uno dei pochi siti buoni in grado di avere la funzione di convertitore di HTML purtroppo però se ci sono all'interno dell'html dei javascript non li converte. Accedete nella sezione HTML convert e troverete una semplice pagina come illustrato in figura:

Sinceramente ho poche conoscenze su questi linguaggi, conosco un po' l'HTML e il CSS ma degli altri poco e nulla. Questo è un codice HTML in in un testo che porta al blog Scuolissima.

<a href=”http://www.scuolissima.com”>Blog per imparare online</a>

Se lo trasformo da HTML a PHP diventa:

 <?php
echo "<a href=”http://www.scuolissima.com”>Blog per imparare online</a>\n";
?>

Se lo trasformo da HTML a JavaScript diventa:

<script type="text/javascript">
<!--
document.writeln(" <a href=”http://www.scuolissima.com”>Blog per imparare online</a> ");
 // -->
</script> 

Se lo trasformo da HTML ad ASP diventa:

#!/usr/bin/perl
print "Content-type: text/html\n\n";
$code[0] = "<a href=”http://www.scuolissima.com”>Blog per imparare online</a>";
for ($i=0;$i<scalar(@code);$i++) {print($code[$i]."\n");} 

Il sito li trasforma così e potrebbero essere anche scritti correttamente, ma se si tratta di una quantità di codice molto lunga sicuramente la conversione non funzionerà.

Continua a leggere »

Quando si scrive un testo su un foglio si va a capo spostando il braccio, per andare a capo su un foglio di documento testo invece si preme il tasto invio. Per andare a capo in una pagina in formato HTML invece bisogna utilizzare un codice ben preciso che è:

<br>

Inseritelo appena dopo il punto dell’ultima frase e poi subito dopo la frase successiva andrà a capo.

Esempio:

1. Mario gioca a palla.<br>Ma dopo andrà a studiare.

Inserendo il codice HTML per andare a capo (<br>) subito dopo la parola “palla.”, la frase andrà a capo in questo modo:

1. Mario gioca a palle.
2. Ma dopo andrà a scuola.

Lo stesso tag va utilizzato per andare a capo o per lasciare spazi sotto le immagini ed altri gadget in un sito (es. come andare a capo su Wordpress).

Continua a leggere »

Se usate blogger e riuscite ad impararlo in fretta vi accorgerete che è un mondo piuttosto piccolo e che col tempo può andarvi anche stretto. Ci sono poche cose nel pannello di amministrazione e si possono fare poche personalizzazioni. A molte cose però si può rimediare agendo direttamente nella modalità HTML.

Ad esempio con Blogger non c’è un pulsante per creare un riquadro ma se volete far apparire una tabella "unica" tipo queste, dovrete inserire il codice che è contenuto al suo interno e copiarlo nella parte HTML del post.

1° Riquadro

<table align="center" bgcolor="#00aa66" border="1" style="width: 600px;"><tbody> <tr> <td bgcolor="#99ffdd" width="600">INSERIMENTO DEL TESTO</td> </tr> </tbody></table>

Si possono effettuare molte personalizzazioni in questa tabella, ad esempio il 1° bgcolor serve per modificare il colore del bordo della tabella, border per variarne le dimensioni, width per variarne la larghezza. Il 2° bgcolor serve per inserire il colore di sfondo, il width per impostare la lunghezza del colore di sfondo, questo valore si consiglia di metterlo della stessa misura del width precedente.
Dove ho scritto "INSERIMENTO DEL TESTO" ovviamente potete inserire il testo che vorrete visualizzare all'interno della tabella.

2° Riquadro

<div style="background-color: #99ffdd; border: 3px solid #00aa66; height: 200px; width: 550px;">TESTO</div>

Questa tabella invece non si espande man mano che gli scrivete all'interno, per ingrandirle dovrete modificare ogni volta i parametri di larghezza (width) e altezza (height). Per utilizzarlo copiate il codice presente al suo interno.

Nota bene: Questo genere di tabelle funziona ovviamente anche per piattaforme diverse da blogger, l'importante che l'andrete ad incollare sulla parte HTML.

Inoltre è possibile realizzare riquadri simili a quelli visti in precedenza racchiudendo un testo fra i tag blockquote, per ottenere questo risultato dovete leggere la guida su come personalizzare le citazioni di Blogger.

LEGGI ANCHE: Creare tabelle con righe e colonne su Blogger

Continua a leggere »

Quelli che potete vedere elencati non sono altro che dei tag presenti all'interno di ogni modello di Blogger, il loro significato potrebbe essere utile per chiunque possiede un blog su Blogger per la gestione grafica, per nascondere determinate cose e mostrarne altre in determinate posizioni.

TAG GLOBALI CHE SI POSSONO USARE IN TUTTO IL MODELLO

data:blog.title:  Titolo del blog 

data:blog.pageType: Tipologia della pagina vale a dire item (singoli post), archive o index. data:blog.url: Indirizzo della pagina data:blog.homepageUrl: Indirizzo della Homepage del blog data:blog.pageTitle: Il titolo della pagina corrente
data:description: La descrizione del blog
data:olderPageTitle: Testo del link dei post più vecchi 
data:newerPageUrl: URL per i post più recenti 
data:newerPageTitle: Testo del link per i post più recenti 
data:commentLabel: La frase da utilizzare per visualizzare il numero di commenti, ad esempio "commenti". 
data:post.dateHeader: La data di ciascun post (presente solo nel primo del giorno) 
data:post.id: L'ID numerico del post 
data:post.title: Il titolo del post 
data:post.body: Il contenuto del post 
data:post.url: Il Permalink del post 
data:post.author: Il nome dell'autore del post 
data:post.timestamp: L'orario del post (presente in ogni post) 
data:post.labels: Elenco delle etichette del post 
data:post.comments: Elenco di tutti i commenti del post 
data:post.numComments: Numero dei commenti del post 
data:comments.id: ID numerico del commento
data:comments.body: Il corpo del commento
data:comments.author: L'autore del commento
data:comments.body: Il corpo del commento
data:comments.author: L'autore del commento
data:comments.author: L'autore del commento
data:content: Il contenuto del gadget.

TAG USATI SOLO NELLA INTESTAZIONE

data:title: Il nome del blog 

TAG USATI SOLO NEI POST

data:olderPageUrl: URL per i post più vecchi 

ALTRI

data:title: Il titolo del gadget 

Continua a leggere »

Scrivere in corsivo a molti può sembrare una cosa banale e anche superflua, utilizzare la scrittura in corsivo per loro è solo una perdita di tempo, ma è davvero così?
Un testo in corsivo rende come il grassetto più facile e quindi più piacevole la lettura di un testo specialmente se questi è di dimensioni lunghe.

Quando viene usate il testo in corsivo?
Il corsivo viene adoperato solitamente quando si vuole evidenziare una parola ma non in modo marcato come il grassetto, ad esempio per il titolo di un libro che viene citato in un testo viene scritto in corsivo.
Oppure ne viene fatto molto uso negli elenchi se questi sono seguiti da una data per ogni parola, e solo se separati solamente da virgole.

FRASE DI ESEMPIO:
Il libro Le civette sul comò che mi hai prestato mi è piaciuto moltissimo.

Come scrivere una parola in corsivo usando HTML?
E' piuttosto semplice, vanno aggiunti alle estremità del testo che vogliamo visualizzare in corsivo questo codice in questo modo:
<i>parola</i>
In questa modo la parola apparirà così, mentre nell'ultima versione di HTML il tag è diverso e si presenta in questo modo: <em>parola</em>

Continua a leggere »

Elemento fondamentale dell'HTML e non solo, sia dal punto di vista visivo (scusate il gioco di parole), sia nei confronti dell'indicizzazione e quindi sul posizionamento dei nostri contenuti nei risultati di ricerca google è il grassetto.
Per chi non lo sapesse è la marcatura che ho appena fatto nella parola precedente "grassetto", è chiamato anche neretto ed adesso vi spiegherò i vari motivi per cui l'uso di questa tecnica può portare vantaggi se fatta con un buon uso.

• Usando il grassetto attiri il lettore verso quella parola, le testate giornalistiche ad esempio lo usano per la descrizione iniziale, i siti di medio livello lo usano per frasi intere su dei testi lunghi, e altri invece lo utilizzano per marcare quelle parti di parole, denominate come keyword; essendo queste ultime non considerate più con l'avvento di Google Panda, gli autori di blog e siti le intromettono nel testo in modo camuffate e per cercare un indicizzazione più veloce le marcano con il grassetto, questi sono tutti gli utilizzi più comuni che ho visto nel web.

Come inserire il grassetto in HTML?

Si deve semplicemente inserire una parola dentro questo codice:

<b>parola</b>

In questo modo avremo come risultato che la scritta all'interno del tag html del grassetto diventerà marcata nel modo seguente: parola.

In certe piattaforme però tale codice non è accettato e solitamente viene sostituito dalle parentesi quadre, ecco un esempio:
[b]parola[/b]

Continua a leggere »

Solitamente questa è una delle domande basilari che si pone un dilettante nel mondo dell'HTML, ci sono passato anche io quando ancora non sapevo neanche cosa fosse l'html e inserivo link nei post del mio blog semplicemente incollandoli direttamente. Quando invece esiste la funzione inserisci link dentro una parola. Ci sono diversi modi per mettere un link all'interno di una specifica parola o frase di un testo, ad esempio nei blog come il mio, Blogspot, esiste già la funzione Inserisci link, ma anche su altre piattaforme come nei forum ci sono degli appositi pulsanti , che non fanno altro che generare un codice HTML come il seguente:

<a href="LINK" >PAROLA</a>

 In sostituzione di link dovete inserire l'url di un sito che appare sulla barra indirizzi, mentre in sostituzione di parola dovete mettere il testo che se cliccato porta alla pagina corrispondente dal link inserito. In questo modo il link si apre sulla stessa finestra chiudendo la pagina precedente, quindi va bene per le pagine interne al sito ma non quando si linkano siti esterni.

<a href="LINK" target="_blank">PAROLA</a>

Aggiungendo target="_blank" il link si aprirà su una nuova scheda, consigliato sempre se si linkano siti diversi dal proprio.

<a href="LINK" target="_blank" rel="nofollow">PAROLA</a>

Quando si linkano siti poco affidabili e che potrebbero essere rimossi nel tempo oppure quando si linka sempre uno stesso sito si deve sempre aggiungere il rel="nofollow" per evitare scorretti passaggi di pagerank.

LEGGI ANCHE: Come inserire link dentro una immagine

Continua a leggere »

Lo sviluppo di internet e la sempre più stretta integrazione tra il mondo dei personal e la Rete, resa evidente dall'evoluzione dei sistemi operativi e dei principali programmi applicativi, ha portato in primo piano ambienti di programmazione prima riservati ai soli esperti. E' questo il caso dei linguaggi ipertestuali, dedicati cioè a gestire i più vari formati di file, da quelli di testo alle immagini, ai suoni, alle animazioni ecc.

Fra i più diffusi citiamo HTML e Javascript, nomi familiari anche agli utenti meno esperti della Rete. Pur non essendo espressamente a ciò dedicato, anche un programma di videoscrittura come Word consente fra l'altro di redigere ipertesti e scrivere pagine Web mediante il linguaggio HTML.

HTML
La sigla HTML esprime le iniziali dell'espressione Hyper Text Markup Language, ossia il linguaggio per la rappresentazione di ipertesti. Si tratta di un linguaggio di programmazione ad oggetti molto semplice da usare, e in grado di produrre pagine Web come quelle di Internet.
Il linguaggio HTML è molto potente, ma per la sua semplicità non necessita neanche di un editor dedicato, essendo sufficiente allo scopo anche rudimentale NotePad di Windows.

Caratteristiche
Il linguaggio tipico del mondo Internet, aperto a milioni di utenti dotati delle piattaforme hardware e software più varie, deve essere obbligatoriamente dotato di una grande versatilità. L'HTML infatti ha la capacità di dialogare con sistemi Windows, Mac, Unix e altri.
E' inoltre caratterizzato da una notevole duttilità, che consente al programma di esplorazione della Rete (browser) che lo gestisce di ignorare le parti di testo non riconosciute. Ciò permette di rendere sostanzialmente leggibile un documento anche ad un browser non recente, consentendo così l'introduzione di continui miglioramenti al linguaggio senza danneggiare troppo i vecchi utenti.

Script
Una delle caratteristiche più rilevanti nella sua versione detta dinamica (DHTML) è la possibilità di poter inserire all'interno della pagina parti del testo, dette script, provenienti da altri linguaggi.
Lo script è una parte di programma in grado di essere eseguita localmente presso il PC dell'utente (client) evitando l'intervento di rete ed eliminando così parecchi tempi morti dovuto al traffico in linea.

Applet
Un particolare utilizzo dello script è quello volto alla realizzazione di applet. Con tale nome si indica una piccola applicazione inclusa in una pagina HTML, come le finestre interattive, le immagini in movimento o dotate di suoni, caratteristiche delle pagine di Internet o di altri strumenti multimediali, come le enciclopedie su CD ecc.

VBScript
Nell'ambito dei linguaggi dedicati alla produzione di pagine Web citare Visual Basic Script, prodotto dalla Microsoft e denominato anche VBScript. Si tratta di un'estensione del linguaggio di programmazione visuale Visual Basic dedicata in particolare alla realizzazione di applet.

JavaScript
La fama del linguaggio di programmazione Java è legata anche ad una sua versione ridotta, JavaScript, che si pone come antagonista di VBScript nella realizzazione di applet per l'HTML.
JavaScript è sostenuto dalla casa Netscpe, concorrente della Microsoft nel mondo dei browser. Ciò spiega la ragione per cui fra le due diverse applicazioni si verifichino a volte, nonostante i tentativi di standardizzazione, alcuni problemi di incompatibilità. Per superarli, la stessa Microsoft ha prodotto una sua versione del programma chiamata Jscript, in gran parte compatibile con JavaScript.

XML
L'enorme sviluppo delle possibilità di HTML ha messo in difficoltà gli stessi produttori dei browser, in sostanza Microsoft e Netscape, che devono gestire un linguaggio sempre più ricco e complesso. Si è quindi reso necessario suddividere il testo del programma in moduli, scritti mediante un sottolinguaggio dedicato a particolari applicazioni. Ogni modulo risulta costituito da un insieme di tag. Tale sottolinguaggio ha preso il nome di XML (Extensible Markup Language, linguaggio di rappresentazione estensibile), da inserire all'interno del testo redatto ancora in HTML. Lo standard di tale metodologia è tuttavia ancora in evoluzione.

Continua a leggere »