Badge sono un modo divertente per invitare amici, fan e visitatori del tuo sito web per contribuire a promuovere il vostro prodotto, servizio o causa. È possibile visualizzare diverse immagini e di fornire istruzioni su come scaricare e il loro collegamento, ma spesso è più conveniente per fornire un frammento di codice gli utenti possono semplicemente tagliare e incollare. Ci sono due metodi per fare questo. Il primo metodo stampa il codice come testo, semplicemente utilizzando il "<code>" tag. Lo svantaggio di questo metodo è che non controlla dove la selezione da parte dell'utente di testo inizia e finisce, che potrebbero causare la copia utente più che il codice necessario. Per questo motivo, si consiglia di utilizzare il secondo metodo, che utilizza il tag "<div" per creare una casella di codice qui sotto la vostra immagine.

istruzione

1 Inserire la vostra immagine distintivo nel tuo post o pagina utilizzando il tag di immagine HTML standard o la funzione "Inserisci immagine" del vostro editor di pagine. Il codice HTML dovrebbe essere simile a questo:

<Img width = "150" height = "150" alt = "MyCause" />

2 Inserire una nuova riga. Digitare un tag DIV di apertura in questo modo:

<Div>

Dare il contenitore di altezza, larghezza e barra di scorrimento con l'aggiunta di un attributo di stile. Scrivere i valori dello stile attribuiscono allo stesso modo sarebbero in un foglio di stile, e separati con punti e virgola. Il valore "troppo pieno" dà il contenitore di una barra di scorrimento nel caso in cui il codice non si adatta perfettamente all'interno delle dimensioni impostate, a seconda delle dimensioni dello schermo dello spettatore.

<Div style = "height: 150px; width: 250px; overflow: auto;">

3 Inserisci il codice che si desidera comparire all'interno della vostra casella di codice nella riga successiva. Un codice distintivo di base include un link per l'immagine e il sito web distintivo si aprirà quando si fa clic. Per esempio:

<a href="http://www.mywebsite.com/mycause/" target="_blank"> <img width = "150" height = "150" alt = "MyCause" /> </a>

Importante: includere l'attributo "alt" nel tag immagine. Questo testo viene utilizzato da screen reader e alcuni dispositivi mobili in cui non è possibile visualizzare immagini e apparirà anche se un utente passa sopra l'immagine con il mouse.

4 Rendere il codice "invisibile" per il browser, sostituendo l'apertura e chiusura staffe con i loro equivalenti di testo, chiamato un'entità HTML. Se avete lasciato il codice come-è, sarebbe stato letto dal browser e visualizzare il distintivo legato per l'utente invece che il codice da copiare. Sostituendo ciascuna staffa tag con un soggetto, il codice verrà visualizzato come testo, consentendo ai visitatori di evidenziare e copiare esso. Per raggiungere questo obiettivo, sostituire ogni parentesi di apertura "<" con "<" e per fascia di fine ">" con ">", come nell'esempio seguente:

<a href="http://www.mywebsite.com/mycause/" target="_blank"> <img width = "150" height = "150" alt = "MyCause" /> </a>

5 Chiudere il contenitore con l'aggiunta di un tag di chiusura DIV sulla riga successiva:

</ Div>

L'anteprima del lavoro aprendo il documento HTML in una finestra del browser, o salvare il tuo post o una pagina nel vostro editor on-line.

Consigli e avvertenze

• Se si utilizza un editor HTML online o piattaforma di blogging, provare a posizionare il "<code>" tag prima snippet di codice e "</ code> dopo, invece di sostituire le staffe. Questo metodo può talvolta mostrare il" <code> " tag insieme con il codice distintivo, nel qual caso si dovranno utilizzare le entità HTML.