Linguaggio HTML: la nostra guida con diversi strumenti utili

Sei pronto per un nuovo approfondimento firmato ElaMedia Group? La nostra agenzia vanta più di 15 anni di esperienza nel realizzare siti web a Roma e nella Consulenza SEO. Il nostro sito vi svelerà tutti i segreti di internet spiegando di che cos’è il copywriting SEO, fornendo una pratica guida alle estensioni SEO su Chrome e persino un approfondimento dedicato ai tool Semrush vs SeoZoom a confronto. Ma oggi di cosa parleremo?

Menu di navigazione dell'articolo

• Guida al linguaggio html per principianti per la Redazione di contenuti per il web
• Strumenti validi per scrivere in linguaggio HTML
• Come creare una tabella con il linguaggio HTML
• Linguaggio HTML: come impostare un'immagine di sfondo (in una tabella)
• Procedura guidata per approfondire il linguaggio HTML
• Grassetto, sottolineato e corsivo
• Come creare degli elenchi con il linguaggio HTML?
• Creare una riga in un documento
• Guida ai tag di sezione HTML
• Tag dei link
• Link per un immagine nel linguaggio HTML
• Linguaggio HTML: attenzione all'usabilità
• Come aggiungere Frame e Frameset
• FAQ sul linguaggio HTML

La promozione e la valorizzazione di un'attività, di un prodotto o di un determinato servizio, passa sempre più spesso attraverso l'utilizzo degli strumenti informatici. Le Web Agency sono proprio delle agenzie che si occupano di realizzazione di progetti per il web (Leggi il nostro approfondimento per capire di che cosa si occupa uno sviluppatore), al fine di dare visibilità ai clienti che richiedono i loro servizi. La messa online di un sito web necessita infatti della conoscenza accurata di internet e del computer; ecco perché spesso è importante affidarsi a professionisti del settore per la realizzazione dello stesso. Il World Wide Web è incentrato soprattutto sull'uso, sulla comprensione e la padronanza dettagliata del linguaggio HTML; i siti web sono infatti una summa di pagine ipertestuali che sfruttano proprio tale linguaggio per esistere e fornire informazioni.

Il World Wide Web è incentrato soprattutto sull'uso, sulla comprensione e la padronanza dettagliata del linguaggio html; i siti web sono infatti una summa di pagine ipertestuali che sfruttano proprio tale linguaggio per esistere e fornire informazioni. Dopo aver ampiamente dato tutte le informazioni su come creare un sito protetto da attacchi informatici e come fare un Redirect 301, ecco dunque la guida all'HTML di ElaMedia Group.

Se ti occorre un aiuto concreto, ti segnaliamo che abbiamo scritto un articolo che parla del Significato di Above The Fold.

Guida al linguaggio html per principianti per la Redazione di contenuti per il web

L'Html (HyperText Markup Language - linguaggio di descrizione per ipertesti) è dunque il centro nevralgico delle pagine web. Esso rappresenta un tipo di linguaggio accessibile a tutti e regolato dal Word Wide Web Consortium (W3C). È per definizione un linguaggio di markup, non di programmazione, che spiega come impaginare, formattare e visualizzare la pagina in questione. Il documento ipertestuale in html viene inserito all'interno di un file che avrà per estensione le diciture .htm oppure .html. I documenti html andranno poi inseriti all'interno di dischi rigidi appartenenti ai computer-server e collegati ad internet.

La pagina html è il documento per mezzo del quale le informazioni sono visibili sul web. Esistono pagine statiche e dinamiche. Le pagine statiche si avvalgono di ipertesti in html per la trasmissione delle informazioni; esse sono inoltre provviste di collegamenti ipertestuali per accedere a diverse pagine e contenuti contemporaneamente. Le pagine html dinamiche per lavorare hanno invece bisogno di linguaggi di scripting (o linguaggi di programmazione interpretati). La pagina web è infine provvista di una o diverse URL (Universal Resource Locator), rappresentanti dei valori posti in sequenza e che definiscono e consentono di identificare l'indirizzo internet della pagina html stessa.

Strumenti validi per scrivere in linguaggio HTML

Chiaramente non esiste una regola valida per tutti i web master; l'ideale, come prima cosa, sarebbe partire con la definizione degli strumenti, che potrebbero essere:

• Un valido editor HTML online (un consiglio: l'ideale sarebbe poter gestire un editor che possa colorare in maniera differente i vari tag HTML e che dunque ti permetta di riconoscerli in maniera più intuitiva)
• Diverse versioni dei Browser più comuni
• Un correttore ortografico
• Un elenco dei tag HTML più importanti (un consiglio: ricorda di aprire e chiudere immediatamente i tag con cui lavori)

È buona norma saper utilizzare anche un programma di convalida del codice. Riportiamo di seguito un video ufficiale Google che ci spiega il perchè.

Chiaro che, dopo aver raccolto gli strumenti per la gestione del nostro progetto in linguaggio HTML, la prima e la più importane raccomandazione sta nell'ordine che deve essere alla base del nostro lavoro. Lavorare con ordine ci permette di ripartire alla grande (successivamente ad una pausa più o meno lunga) e ci permette di poter capire comodamente dove risiedono gli eventuali errori in cui potremmo incappare.

Per arricchire il tuo sito o quello del tuo cliente valuta di utilizzare dei programmi per le mappe concettuali. Nell'ambito del tuo lavoro ti sarà capitato senza dubbio di imbatterti in una serie di errori specifici... per tua fortuna abbiamo appena pubblicato un approfondimento su come reagire all'errore 403.

La struttura di una pagina web in linguaggio HTML

Le due sezioni principali di un documento sono quelle relative a HEAD e BODY (tenute assieme appunto dall'elemento HTML). Dovrai prima di tutto specificare, nella parte superiore della pagina, le informazioni sulla versione utilizzata del codice (che può essere quella rigorosa, quella allargata o quella che si basa su frame). Di seguito la raffigurazione del file in linguaggio html di cui abbiamo parlato dopo l'aggiunta dei vari tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

Come allineare il testo? Scoprilo con la nostra guida al linguaggio HTML

Può capitare di dover fare a meno dell'allineamento di default che propone un linguaggio html. L'allineamento a sinistra infatti è sicuramente indicato per la maggior parte del testo che scriviamo sul web; le varianti che il codice propone sono tuttavia anch'esse molto importanti.

Queste varianti (sicuramente peculiari) permettono infatti di gestire titoli, firme e/o informazioni relative a dei contatti, in maniera del tutto personalizzata. Si consiglia di solito (ma sono solo delle indicazioni di massima; ogni web master dovrà gestire il suo testo in maniera del tutto funzionale alle esigenze che troverà nel suo lavoro) di gestire tramite un allineamento centrato i titoli di pagina, mentre si preferisce optare per l'allineamento a destra (se si decide appunto di inserire informazioni relative all'autore, alla sua firma e/o ai suoi contatti).

Tutto ciò si ottiene combinando con l'elemento <div> (che vedremo di fondamentale importanza nell'economia di una pagina web creata in HTML), il giusto attributo e il giusto valore.

E' bene chiarire fin da subito che, per quanto riguarda l'allineamento di un testo in linguaggio html, si fa riferimento all'attributo align. Il valore in questo caso è da scegliersi a seconda delle esigenze; si può valutare tra le diverse opzioni che riportiamo qui:

• center (per allineare il testo al centro; utilizzato per titoli ma anche per spot o slogan)
• left (per allineare il testo a sinistra)
• right (per allineare il testo a destra; utilizzato per l'inserimento dei contatti e delle firme, ma anche per un'ipotetica data)
• justify (per allineare il testo in maniera giustificata e per rendere più gradevole la lettura in ottica usabilità)

Se vuoi approfondire determinate dinamiche ti consigliamo di leggere il nostro articolo sui Web Register.

Allineare il testo con le tabelle

Un altro modo di ordinare il nostro documento, allineandone il testo, è far un buon uso delle tabelle. La tabella può anche rappresentare un buon contenitore di testo (all'interno delle sue righe e delle sue colonne). Oggi e sempre più spesso le tabelle vengono usate per la realizzazione dei layout di un sito (attraverso la tecnica dell'annidamento), venendo un po' meno a quello che era dunque il loro scopo originario.

La proprietà float

La proprietà float rimuove un qualsiasi elemento dal normale flusso del documento e lo sposta su uno dei lati del suo elemento contenitore (il contenuto che circonda l'elemento gli scorrerà intorno sul lato opposto rispetto a quello indicato come valore di float. Da sottolineare che la proprietà non è ereditaria. I possibili valori associabili a questa proprietà sono:

• left: l'elemento viene spostato sul lato sinistro
• right: l'elemento viene spostato sul lato destro
• none: valore di default in mancanza di una dichiarazione esplicita

Allineare il testo nel CSS

Supponiamo di trovarci di fronte un documento HTML in cui abbiamo bisogno di allineare parte del testo contenutovi. Certamente sarà una situazione che di sovente vi sarà capitata e certamente avrete dovuto far riferimento a guide sul linguaggio html o sui fogli di stile CSS. Vediamo di mettere un po' d'ordine nelle competenze che già possedete.

Per allineare il testo direttamente dal nostro documento di lavoro, occorrerà far riferimento all'elemento <div>, all'attributo align e ai diversi valori che vi andranno associati, di cui elenchiamo di seguito le potenzialità:

• center (per allineare il testo al centro)
• left (per allineare il testo al sinistra)
• right (per allineare il testo al destra)
• justify (per allineare il testo in maniera giustificata)

Linguaggio HTML, CSS e Fogli di stile

Ovviamente durante questo nostro percorso per scoprire il linguaggio html è fondamentale sapere anche qualcosa sul linguaggio CSS (hai già letto la nostra guida al CSS?); con l'avvento poi di HTML diventa fondamentale anche avere un approccio al linguaggio di programmazione Java.

Può capitare poi di trovarsi nella circostanza di dover allineare in maniera uniforme il testo di diversi documenti (documenti che magari fanno riferimento ad un intero sito web). È, in questa circostanza, più che mai consigliabile l'utilizzo di un foglio di stile a cui collegare i nostri documenti di lavoro. Ricordiamo che, per collegare il foglio di stile css che abbiamo creato, ai nostri documenti HTML, dobbiamo:

• entrare nel nostro documento
• inserire, sotto il tag </title>, la stringa <link rel=stylesheet href='css/miostile.css' type='text/CSS'>

A questo punto, collegato il nostro foglio di stile css ai documenti HTML su cui vogliamo abbia effetto il nostro lavoro di 'allineamento', dobbiamo creare un selettore e assegnarvi la proprietà text-align (che a sua volta dovrà mostrare un valore, uno tra quelli elencati poco sopra). Il risultato verrà visualizzato come nell'esempio di cui sotto:

.textleft {

text-align: left;

}

Contrariamente alla formattazione del testo standard, nella quale occorreva fare attenzione a come veniva utilizzato l'attributo justify in relazione con la scarsa compatibilità che esso rivestiva nei confronti dei browser più anziani, l'allineare il testo con i fogli di stile css dovrebbe essere molto più agevole (nei termini di compatibilità di cui abbiamo appena parlato).

Margini nel CSS

Esistono quattro proprietà di controllo dei margini. Il valore da associarvi è una percentuale o un numero seguito da un'unità di misura. Le proprietà sono margin-top: margin-right: margin-bottom: margin-left:

Come creare una tabella con il linguaggio HTML

Mettere ordine nel nostro documento dovrebbe essere una priorità, che di fatto incontra il gusto estetico per un design raffinato e l'usabilità che l'ordine stesso riesce a garantire per un visitatore più o meno occasionale. In questo articolo, così come in altri che da oggi pubblicheremo, affronteremo delle tematiche legate alle tabelle, un elemento del codice HTML volto proprio a soddisfare le due necessità di cui sopra.

Creare una tabella a larghezza fissa

Per disegnare una tabella occorre combinare il tag <table> e il tag relativo alle righe e alle diverse celle (rispettivamente <tr> e <td>). Ovviamente, per controllare con precisione una tabella, occorre controllarne la larghezza, che andrà indicata sia per la tabella che per le singole celle (ricorda che la somma della larghezza delle singole celle deve coincidere con quella totale della tabella). Per quanto concerne la larghezza va indicata con l'attributo width. Quando di crea una tabella con l'HTML è buona abitudine, per controllare l'intera struttura, centrare la tabella stessa rispetto alla pagina (attraverso il tag <div align='center'>). Il tutto è sintetizzato nell'esempio sotto:

<table width='585'>

<tr>
<td width='200'>
</td>

<td width='385'>
</td>
</tr>

</table>

Creare una tabella dinamica

La differenza principale delle tabelle dinamiche (ma lo dice la stessa parola) rispetto a quelle fisse è che lo spazio che si attribuisce alle celle (e dunque alla stessa tabella) si adatta automaticamente al testo e/o alle immagini che vi si inseriscono (ma anche alla pagina che ospita il costrutto HTML). Per creare una tabella dinamica occorre, come spazio pre-impostato, un valore percentuale, proprio come indicato di seguito:

<table width='100%'>

<tr>
<td width='20%'>
</td>

<td width='80%'>
</td>
</tr>

</table>

Fondere elementi fissi e dinamici

E' chiaro che l'ideale, in termini di resa estetica e funzionale, è rappresentato da una tabella che mostri elementi sia fissi che dinamici. Per creare una tabella che sia funzionale in tal senso di solito si attribuisce valore dinamico alla parte di tabella che dovrà ospitare del testo. Facciamo dunque un esempio in cui solo i margini della pagina abbiano larghezza fissa: la prima cella avrà valori fissi mentre le rimanenti saranno dinamiche. Di seguito l'esempio:

<table width='100%'>

<tr>
<td width='200'>
</td>

<td width='100%'>
</td>
</tr>

</table>

Notiamo dunque come, per creare una tabella dinamica contenete delle celle fisse e dinamiche, occorre specificare nel tag <table> una larghezza dinamica come 100%. E' chiaro invece, che per quanto riguarda il riquadro fisso, esso dovrà contenere un elemento grafico con valori esattamente coincidenti con quelli del riquadro in oggetto.

Sovrapporre più tabelle

È possibile sovrapporre più tabelle inserendo di fatto gli elementi che la contraddistinguono in maniera sequenziale gli uni agli altri. Tutto ciò viene fatto nel momento in cui si ha la necessità di creare una pagina più lunga del solito mantenendo un controllo preciso dei diversi elementi che vengono inseriti.

Nidificare le tabelle

Si ricorre a tabelle nidificate nel momento in cui si ha bisogno di una struttura piuttosto complessa. In pratica una tabella nidificata è una tabella interamente costruita all'interno di una cella contenuto in una tabella per così dire 'primaria'. Di conseguenza, la tabella principale controllerà l'interfaccia di una pagina, mentre la tabella nidificata sarà la responsabile del layout di un'immagine e/o di un testo inserito nella tabella stessa. A livello di codice non cambia nulla: basterà posizionarsi nella cella all'interno della quale si ha intenzione di inserire una nidificazione e costruire una tabella comune.

Come impostarne le dimensioni e il colore attraverso il linguaggio HTML

Dopo aver parlato di come Gestire i bordi e l'allineamento di una tabella HTML, oggi descriveremo l'importanza di lavorare in maniera corretta sulle impostazioni di cella, sull'importanza di valutare sempre il browser con il quale visualizzeremo il nostro lavoro e sulla variante riguardante il contenuto delle celle (che va appunto a determinare l'utilizzo o meno di alcuni attributi).

Impostare l'altezza di una cella

Si consiglia di utilizzare l'attributo height (che definisce l'altezza di ogni cella html) solamente in presenza di celle che contengano delle immagini, visto che la dimensione del testo dipende il più delle volte dal browser utilizzato. L'esempio riportato sotto chiarisce la procedura da utilizzare:

<table width='585' border ='0'>

<tr>

<td width='200' height='200'>

</td>

<td width='385'>

</td>

</tr>

</table>

Se la tabella in oggetto fosse stata impostata con larghezza fissa, avremmo potuto inserire l'attributo height direttamente nel tag <table>. Ricordiamo come sia possibile allineare il contenuto di una cella in una tabella html sia lungo l'asse verticale che lungo quello orizzontale (utilizzando gli attributi valign e align).

Impedire la riduzione delle celle con gli spaziatori

Per controllare lo spazio vuoto all'interno di una tabella, occorre creare una cella con larghezza (o altezza) precisa. Per fare ciò occorre inserire un'immagine (trasparente) nella cella in oggetto. A livello di codice occorrerà inserire la nostra immagine nella cella, specificando, per l'attributo height, lo stesso della cella (in questo caso lasciare per l'attributo width il valore 1 originario). I bordi dell'immagine devo essere impostati a 0.

Impostare celle a dimensioni variabili

Supponiamo di avere una tabella costituita da tre righe, ciascuna contenete quattro celle. Supponiamo ora di avere l'intenzione di modificare la riga superiore facendo in modo che essa contenga solamente due celle aventi una larghezza totale pari alla somma delle quattro celle presenti nelle due righe seguenti. Ebbene, il tutto si ottiene riducendo ovviamente a due il numero delle celle presenti nella prima riga e inserendovi l'attributo colspan con il valore 2.

Impostare le righe a dimensioni variabili

Per impostare righe a dimensioni variabili si utilizza un procedimento simile a quello descritto nel paragrafo precedente. In questo caso tuttavia, si modifica una cella lungo l'asse verticale, in modo che abbia un'altezza pari alla somma delle tre celle nella colonna seguente. Ricordiamo che se le celle sono elementi disposti lungo l'asse orizzontale, le righe dispongono invece in maniera verticale il contenuto di una tabella HTML. Per impostare righe a dimensioni variabili si utilizza l'attributo rowspan seguito da un valore numerico (che identifica il numero di righe che saranno oggetto della modifica); esso andrà aggiunto nel tag della prima cella nella prima riga.

Colore di sfondo per le celle

Può essere molto utile assegnare un colore di sfondo alle singole celle. Potrebbe per esempio essere importante attribuire una differenza stilistica all'intestazione. Per impostare il colore di sfondo per una specifica cella occorre utilizzare l'attributo bgcolor, specificando il nome di un colore adatto al web oppure un valore esadecimale. E' possibile applicare un colore differente per ogni cella della tabella. Si consiglia, nel caso in cui si faccia affidamento ad un'immagine inserita in una cella, di scegliere un colore di sfondo molto simile a quello dell'immagine stessa: il tutto per rendere compatibile la visualizzazione a tutti i browser in commercio.

Gestire i bordi e l'allineamento di una tabella

Gestire i bordi di una tabella in linguaggio html significa poter controllare il design e l'ordine che caratterizza il nostro documento. Si consiglia infatti di creare una tabella in HTML con dei bordi ben definiti quando essa contiene dei dati veri e propri come dei grafici matematici. Per creare e/o eliminare i bordi di una tabella occorre far riferimento all'attributo border come nell'esempio sotto (ovviamente è possibile utilizzare qualsiasi valore oltre lo 0).

<table width='585' border='0'>

<tr>
<td width='200'>
</td>

<td width='385'>
</td>

</tr>
</table>

La spaziatura interna delle celle

Sempre nel nome del design e dell'ordine (che deve regnare sovrano all'interno di una pagina creata in HTML) si consiglia di assegnare dello spazio che vada a posizionarsi tra il contenuto e il bordo di ogni cella della nostra tabella. Per aggiungere questo tipo di spaziatura occorre utilizzare l'attributo cellpadding, all'interno del tag di apertura <table>. L'esempio di cui sotto dovrebbe chiarire la posizione esatta in cui si deve inserire questo attributo.

<table width='585' border='1' cellapadding='10'>

<tr>
<td width='200'>
</td>

<td width='385'>
</td>

</tr>
</table>

Da sottolineare che tale risultato è ottenibile anche attraverso una strada leggermente diversa. Se il nostro fine è quello di avere una tabella HTML ordinata allora possiamo far riferimento anche all'attributo cellspacing che di fatto regola lo spazio esistente tra le varie celle (il risultato è dunque simile a quello ottenuto con l'attributo cellpadding).

Allineamento delle celle

I dati contenuti in ciascuna cella della nostra tabella possono essere allineati verticalmente con l'attributo valign, seguito dai valori top (allinea i valori alla parte superiore della cella), middle (allinea i valori alla parte centrale della cella), bottom (allinea i valori alla parte inferiore della cella) e baseline (esamina una cella e ne allinea il contenuto rispetto ad una linea di base comune alle altre celle).

Nella stessa maniera è possibile determinare l'allineamento delle informazioni contenute in una tabella HTML lungo l'asse orizzontale. Il tutto grazie all'attributo align e ai valori che devono essere utilizzati (left, center, right e justify). Nell'esempio vediamo esattamente dove vanno inseriti questi l'attributi.

<table width='585' border='1' cellapadding='10'>

<tr>
<td width='200' valign='top' align='left'>
</td>

<td width='385'>
</td>

</tr>
</table>

Linguaggio HTML: come impostare un'immagine di sfondo (in una tabella)

All'interno di una tabella è possibile impostare un'immagine di sfondo (per una o più celle). Occorre prima di tutto individuare la cella per cui si intende cambiare lo sfondo. Per quanto riguarda il linguaggio HTML occorre a questo punto aggiungere l'attributo background nel tag della cella. Successivamente basterà specificare con un valore la posizione del file grafico. Si veda l'esempio seguente:

<table width='100%' border='0'>

<tr>

<td width='200' bgcolor='#000000' background='images/prova.gif'>

</td>

<td width='100%'>

</td>

</tr>

</table>

Inserire immagine

In principio il web non aveva gusto estetico. Si potrebbe partire in questa maniera raccontando l'evoluzione che internet ha vissuto nel suo primo anno di vita. Tanto bastò ai 'padri fondatori' per accorgersi che mancava qualcosa; elementi che, anche nella carta stampata, servivano soprattutto a decorare un ambiente, ad interagire con lo schema di esplorazione e a aggiungere dettagli al contenuto scritto.

Il tag <img> e l'attributo src

Ovviamente stiamo parlando delle immagini e della possibilità, che arrivò come detto dopo circa un anno dalla nascita di internet, di inserirle nel codice html. È bene sottolineare che non tutti gli sviluppatori web amano inserire immagini nei propri documenti: alcuni denigrano questa pratica essenzialmente per due motivi:

• presunto appesantimento della pagina
• presunta non compatibilità con i browser meno recenti

Per inserire un'immagine nel linguaggio html occorre utilizzare il tag <img> e l'attributo src (la sorgente che in pratica definisce la posizione e il percorso fisico dell'immagine che desideriamo poter visualizzare). Di seguito un esempio:

<body>

<img src='images/elamedia.gif'>

</body>

Occorre fare attenzione al percorso che si inserisce con l'attributo src. Se esso non corrisponde all'immagine, l'utente, tramite browser, visualizzerà un'icona che indicherà l'impossibilità di scaricare l'immagine. Si ricorda che, prima di inserire un'immagine nel linguaggio html, occorre fare in modo che le immagini stesse siano scansite e ottimizzate a dovere (questo per rendere più agevole il dowload e per aumentare la qualità dell'immagine stessa).

Impostare l'altezza e la larghezza

Riportiamo qui a fianco un video tutorial che potrebbe essere utile. Quando inseriamo un'immagine nel nostro codice di lavoro html, probabilmente saremo chiamati a definirne sia l'altezza che la larghezza (questo per adattare, nel miglior modo possibile, l'immagine all'ambiente che l'accoglie). L'attributo height descrive l'altezza di un'immagine mentre, per indicarne la larghezza, viene usato l'attributo width (i valori di entrambi sono misurati in pixel). Sia l'uno che l'altro vengono utilizzati all'interno del tag <img> come nell'esempio che segue:

<body>

<img src='images/elamedia.gif' height ='150' width='50'>

</body>

Da chiarire un concetto molto importante: modificando i valori di questi due attributi non si modifica il peso dell'immagine (per questo occorre utilizzare un programma grafico).

Inseriamo il testo alternativo

Il testo da associare ad un'immagine che stiamo inserendo nel linguaggio html ha diverse utilità:

1. fornisce una descrizione dell'immagine agli utenti in possesso di browser in grado di visualizzare solo pagine di testo
2. durante il download delle immagini nei browser grafici il testo alternativo viene trasmesso all'utente affinché si renda conto di ciò che sta scaricando (alcuni sviluppatori web inseriscono nel testo alternativo anche il peso e il tempo di download approssimativo dell'immagine)
3. i browser grafici visualizzano il contenuto del testo alternativo al passaggio del mouse dell'utente sopra l'immagine
4. quasi tutti i Motori di ricerca più importanti vi attribuiscono importanza strategica (per quanto riguarda indicizzazione e ottimizzazione)

A proposito di motori di ricerca: Per migliorare la visibilità e l'autorità di un sito web, sono estremamente utili in ottica SEO, le citazioni e le menzioni, anche dette brand mention. Infatti, Quando un marchio, un'azienda o un sito web viene menzionato su altri siti, viene riconosciuto dagli algoritmi dei motori di ricerca come un segnale di autorevolezza e popolarità. Ciò influisce positivamente sul posizionamento del sito nei risultati di ricerca.

L'attributo da utilizzare è ALT; l'esempio di cui sotto ne illustra l'utilizzo:

<body>

<img src='images/elamedia.gif' height ='150' width='50' alt='ElaMedia Group è una Web Agency che offre servizi per il Web. Gestione di portali di proprietà e promozione dell'attività dei clienti attraverso pagine create ad hoc, banner o pubblicità.'>

</body>

Centrare immagine

Inserire un'immagine in un documento html non è poi così complicato. Sicuramente più delicata è l'attività di allineare e centrare l'immagine stessa. Ovviamente abbiamo la possibilità di definire, nell'ambito di quest'operazione, alcuni attributi che ci aiuteranno ad allineare la fotografia rispetto agli altri elementi del testo.

Allineare l'immagine verticalmente

Per allineare verticalmente un'immagine in un documento html occorre far riferimento all'attributo align seguito dai valori:

• top: allinea la parte superiore dell'immagine con la riga corrente
• middle: allinea il centro dell'immagine con la riga corrente (utilizzato per centrare le immagini nei documenti html)
• bottom: allinea la parte inferiore dell'immagine con la riga corrente

Netscape introdusse dei valori non standard (supportati comunque anche dalle versioni più recenti di Internet Explorer) che rispondono ai nomi di texttop, absmiddle e absbottom.

Di seguito riportiamo un esempio:

<body>

<img src='images/elamedia.gif' height ='150' width='50' alt='ElaMedia Group è una Web Agency che offre servizi per il Web. Gestione di portali di proprietà e promozione dell'attività dei clienti attraverso pagine create ad hoc, banner o pubblicità.' align='middle'>

</body>

Centrare immagine orizzontalmente

Conoscere in maniera adeguata il codice html ci permette anche di allineare un'immagine orizzontalmente. In questo caso i due valori da far seguire all'attributo align saranno left e right (come specificato nell'esempio di cui sotto).

<body>

<img src='images/elamedia.gif' height ='150' width='50' alt='ElaMedia Group è una Web Agency che offre servizi per il Web. Gestione di portali di proprietà e promozione dell'attività dei clienti attraverso pagine create ad hoc, banner o pubblicità.' align='right'>

</body>

L'allineamento orizzontale viene maggiormente usato rispetto a quello verticale perché permette di utilizzare più attributi. Da sottolineare che l'allineamento predefinito di un'immagine nel linguaggio html è a sinistra.

Immagini mobili

Per centrare un'immagine rispetto ad un testo (facendo in modo che le righe facciano da contorno rispetto all'immagine) occorre inserire l'immagine prima del testo che vogliamo faccia da cornice e inserire gli attributi descritti nei paragrafi di cui sopra. Qui un esempio in cui l'immagine viene posizionata sulla sinistra (con il testo che farà da cornice):

<body>

<img src='images/elamedia.gif' height ='150' width='50' alt='ElaMedia' align='left'>

<p> Group è una Web Agency che offre servizi per il Web. Gestione di portali online di proprietà e promozione dell'attività dei clienti attraverso pagine create ad hoc, banner o pubblicità.</p>

</body>

Aggiungere spazio tra l'immagine e il testo nel linguaggio HTML

Una volta centrata la nostra immagine in linguaggio html potremmo sentire l'esigenza di aggiungere dello spazio tra il testo che ne fa da cornice e l'immagine stessa. Per compiere questa semplice operazione occorre far riferimento all'attributo hspace (regolando lo spazio attraverso un valore espresso in pixel). Allo stesso modo, per distribuire meglio lo spazio verticale che separa l'immagine dal testo, utilizzeremo l'attributo vspace. Da ricordare che l'allineamento e la spaziatura inseriti in questo modo non sono fissi: l'immagine si sposterà adattandosi dinamicamente allo spazio disponibile.

Immagine come sfondo

Oggi vedremo come posizionare sullo sfondo di un documento html un'immagine. Chiaramente l'operazione si può svolgere sia per chiare funzionalità decorative che per gestire diversi effetti funzionali.

Tecnica d'inserimento sfondo

La tecnica con la quale viene inserita una fotografia e/o un'immagine in uno sfondo, viene detta di wallpaper o di tiling (l'effetto che si ottiene è molto simile a quello che si ottiene tappezzando o piastrellando una parete).

È ovvio che le immagini portino con sé una funzione decorativa. È un tantino meno scontato osservare il fatto che un'immagine di sfondo possa servire a fini funzionali (si possono creare dei riquadri di colore al di sopra dei quali collocare altri elementi tramite codice html).

Procedura guidata per approfondire il linguaggio HTML

Individuiamo il tg <body> e inseriamo all'interno di esso l'attributo background. A questo occorre associare, come valore relativo a questo attributo, il 'percorso' specifico che individua l'immagine precedentemente caricata in una cartella del nostro progetto. I passaggi sono tradotti nell'esempio di cui sotto:

<body background='images/elamedia.gif'>

Da sottolineare come occorra analizzare il risultato a diverse risoluzioni (sul browser): alcune immagini infatti vengono ripetute a risoluzioni più elevate. Ricordiamo come, per ottenere dei risultati più soddisfacenti, si possa, in maniera previa, andare a modificare le dimensioni fisiche dell'immagine utilizzando un editor grafico.

Come ultima raccomandazione: utilizzare sempre delle immagini che facciano risaltare lo sfondo html della nostra pagina (che non comprometta insomma l'equilibrio tra colore, testo e altri elementi).

La formattazione di un testo in linguaggio HTML: tag br e grassetto

Dopo aver affrontato l'argomento struttura paragrafi passiamo oggi ad occuparci del tag <br> e della sua funzionale utilità. Si tratta, in definitiva, di un tag utile per gestire correttamente l'interruzione delle righe in un testo.

Interruzione di riga

Il suo utilizzo viene preferito nel momento in cui si sceglie di puntare su brevi righe di testo, come per esempio degli indirizzi o delle note. Per quel che concerne l'utilizzo pratico di questa tecnica, basta semplicemente aggiungere il tag <br> al termine della riga che si vuole interrompere (la tecnica è associabile al metodo di creazione di un paragrafo con tag singolo).

Non avremmo dunque un nuovo paragrafo ma semplicemente un'interruzione di riga, come nell'esempio seguente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Il mio titolo </title>

</head>

<body>

ElaMedia<br>
Via Dino Penazzato, Roma<br>
www.elamedia.it<br>

</body>

</html>

Se fossero necessari più spazi si potrebbe ricorrere alla tecnica detta della stacking. Questa tecnica di formattazione del codice HTML permette semplicemente di definire altre ricorrenze del tag <br> (e dunque altre interruzioni di riga), ove opportuno. Chiaramente ci sentiamo di sconsigliare l'abuso di questa tecnica: nel caso si avesse infatti bisogno di molto spazio tra una riga e l'altra, converrebbe affidarsi ad una tabella o anche direttamente ad una corretta gestione dei fogli di stile.

Come gestire i margini

Che cosa faremmo se non si potesse gestire il margine, destro e sinistro, di un documento' Avremmo certamente un testo allineato perfettamente con i bordi del nostro schermo. Per risolvere la situazione ovviamente ci sono i fogli di stile; per chi invece ne volesse far a meno, utilizzando un HTML 4.0 nella sua versione allargata, può far riferimento all'elemento <blokquote> che ci permette di gestire manualmente i margini di un testo in linguaggio html.

Grassetto, sottolineato e corsivo

Nella versione HTML 4.0 gli attributi del testo vengono controllati grazie ai fogli di stile. È per questo che, se si decide di utilizzare questi tag, occorre accertarsi che il documento HTML oggetto del nostro lavoro venga identificato come allargato. I tag per gli attributi del testo sono i seguenti (il codice simmetrico per la gestione di più attributi contemporaneamente richiede di nidificare ogni gruppo di tag all'interno di quello precedente):

• <b> per il grassetto (da sottolineare un suo possibile uso anche in ambito SEO (hai già letto il nostro approfondimento su come fare l'ottimizzazione seo di un sito web?), per evidenziare le Parole chiave che appunto vengono "sfruttate" per indicizzare una determinata pagina web)
• <i> per il corsivo
• <u> per il sottolineato (di solito associato ai link)

Non conviene assolutamente esagerare con l'utilizzo di questi tag, per le seguenti, semplici ragioni:

• si tende a creare confusione e a "sporcare" inutilmente il testo su cui si lavora (non dimentichiamoci che molto probabilmente avremmo la necessità di metterci al lavoro, sullo stesso documento, dopo aver passato molto tempo su altri progetti; conviene dunque lasciar tutto il più ordinato possibile per permettere di recuperare facilmente il lavoro anche dopo mesi di inattività).
• il sottolineato di solito viene associato ai link (qui siamo ai confini con concetti legati all'usabilità del web; meglio non confondere l'utente e guidarlo in maniera corretta e veloce nella fruizione della nostra pagina web).

Come creare degli elenchi con il linguaggio HTML?

Essere ordinati potrà giocare a nostro favore nel momento in cui ci troveremo ad analizzare lo stesso codice a distanza di mesi.

È per questo che nel web vengono spesso organizzati i contenuti delle pagine attraverso degli elenchi puntati (anche detti puntati) e/o numerati. 

Creare un elenco puntato

Per quel che riguarda gli elenchi puntati il codice HTML ci viene in contro proponendoci dei tag appositamente pensati. La procedura è molto semplice:

• Prima di tutto occorre digitare il tag di apertura <ul>
• Successivamente si gestirà l'elenco tramite il tag <li> (abbiamo la possibilità di inserire quanti elementi desideriamo, senza la necessità di utilizzare il tag di chiusura </li>: sebbene molti browser siano in grado di ignorare l'errore, sottolineiamo il fatto che si tratta di un elemento superfluo)
• Infine occorre chiudere l'elenco puntato con il tag di chiusura </ul>

Creare un elenco numerico

Per quel che concerne gli elenchi numerati il codice HTML mette a disposizione dei tag ad hoc. La procedura comunque rimane principalmente la stessa:

• Prima di tutto occorre digitare il tag di apertura <ol>
• Successivamente si gestirà l'elenco tramite il tag <li> (anche qui abbiamo la possibilità di inserire quanti elementi desideriamo, senza la necessità di utilizzare il tag di chiusura </li>)
• Infine occorre chiudere l'elenco puntato con il tag di chiusura </ol>

Creare una riga in un documento

Assieme agli elenchi potrebbe esser opportuno dividere ulteriormente il nostro documento tramite l'utilizzo di righe orizzontali. Anche qui si tratta di un operazione molto semplice da svolgersi tramite il tag <hr>. Da notare che anche questo tag non ha bisogno della relativa chiusura; è buona norma invece inserire il tag <br> (corrispondente ad un'interruzione di pagina immediatamente dopo la riga appena creata).

Guida ai tag di sezione HTML

Le sezioni vengono delineate dai tag relativi alle intestazioni. Le informazioni essenziali per l'intero documento di solito vengono racchiuse nel tag <h1> che si deve posizionare a sua volta nella sezione <BODY> (nulla vieta poi di includere nel documento fino a sei livelli di intestazione differenti, a seconda della necessità e dell'importanza delle varie sezioni). Per informazioni sul tag <h2> consultare questo l'articolo d'approfondimento.

Da sottolineare che i programmi utente di tipo visuale riproducono solo le intestazioni più importanti con caratteri più grandi di quelli usati per le meno importanti (è scorretto utilizzare questi elementi per incrementare la dimensione del testo perché così facendo si danneggia la Semantica del documento). Le informazioni di intestazione dunque possono essere usate dai programmi utente per ricavare un sommario per un documento.

L'ordine di posizionamento dei titoli deve essere rispettato: uno o più elementi <h2> devono per forza seguire un elemento <h1> (è scorretto passare da h1 a H3 senza valorizzare l'elemento H2).

La creazione dei paragrafi

Nell'HTML è possibile strutturare i paragrafi seguendo due strade differenti. Se si preferisce puntare sulla semplicità allora si consiglia l'utilizzo dell'approccio al singolo tag. Se invece si utilizzano dei Fogli di stile CSS allora il metodo che utilizza il tag di apertura e chiusura sarà più adatto.

La differenza tra i due metodi sta dunque nella necessità o meno di utilizzare il tag di chiusura rispetto a tag <p> (che appunto delinea i paragrafi all'interno di un documento). Ricordiamo che il tag <p> precede appunto il paragrafo che il web master inserirà al di sotto delle varie intestazioni <h_>

Da sottolineare come non sia possibile inserire più di un tag <p> per riga di codice: il browser infatti non considererebbe che il primo tag. Altra storia invece se si utilizza il metodo che usa il tag di chiusura: in questo caso, entrambi i tag (apertura e chiusura) dovranno essere posizionati nella stessa riga.

Se lo sviluppo web ti appassiona, dai un'occhiata al nostro articolo in cui riflettiamo sul significato di below the fold.

Guida H1 e H2: ecco come utilizzarli per ottimizzare al meglio la tua pagina (lato SEO)

I motori di ricerca leggono comunque i dati della pagina HTML in sede di valutazione e creazione di page rank, per questo motivo il modo in cui formattiamo un pezzo scritto per il web è importante dal punto di vista dell'ottimizzazione. In particolare, concetti molto importanti sono quelli relativi ai tag h1 e h2.

In ottica di ottimizzazione, è molto importante lo stile che si utilizza nella formattazione di un testo. I webmaster possono scegliere di realizzare siti scrivendo direttamente in HTML oppure utilizzando appositi fogli di stile, i CSS, che permettono non solo di scrivere il contenuto, ma anche di agire sulla formattazione dello stesso, senza conoscere in maniera approfondita il linguaggio HTML.

Inserimento dei tag h1 h2

I tag h1 e h2 sono i cosiddetti tag di intestazione, utilizzati cioè per identificare il titolo ed il sottotitolo che va ad introdurre un paragrafo interno al testo. Per comprenderci, facciamo un caso pratico: in quest'articolo il testo del Titolo, ovvero "Tag H1: caratteristiche e sintassi" è, oltre ad essere linkato a se stesso, contrassegnato dal tag h1, mentre i due titoli dei paragrafi "Specifiche Tag H1" e "Come usare il Tag H1" vengono contrassegnati dal tag h2. Con il pannello in css queste operazioni sono molto semplici, basta infatti selezionare il testo che si vuole taggare con h1 e h2 e scegliere l'opzione dal menù, che di solito è identificata come Intestazione 2 o Titolo 2 nella sezione FORMATO del menù.

Se usiamo word o simili, possiamo scrivere un documento e sempre attraverso il formato, andare a selezionare intestazione 2 o Titolo 2: copiando nel css tramite incolla da word il nostro pezzo, in automatico avremo inseriti i tag h1 e h2.

Per quanto riguarda la costruzione della struttura di una pagina web, è importante conoscere e sapere utilizzare i Tag di Heading, detti anche Tag Hn dove n identifica un numero da 1 a 6 che stabilisce il tipo di Tag specifico. Vediamo nello specifico il Tag H2, utilizzato per evidenziare, all'interno di un testo, alcune parole specifiche, in particolar modo i sottotitoli in un articolo di argomento generico. Sembra una cosa di poco conto, ma evidenziare un testo è fondamentale in ottica SEO.

Tag H1 e l'importanza del Title per la SEO?

Il Tag H1 per strutturare gerarchicamente determinati testi all'interno di un articolo permette di segnalare l'argomento generale della pagina, e dunque i motori di ricerca, Google in primis, andranno ad assegnare una rilevanza significativa alle parole comprese fra i Tag. Ad esempio, in una pagina Html scrivere:

<h1>pippo paperino</h1>

assegnerà maggiore rilevanza al testo "pippo paperino" rispetto a

<h4>pippo paperino</h4>

Problematiche

Uno dei principali motivi di lamentele è quello di avere una grandezza eccessiva di carattere restituito in sede di visualizzazione del testo. Uno dei modi per superare questo problema è fornito dai CSS che si utilizzano per lavorare sui contenuti dei siti internet, i quali permettono di modificare l'ampiezza del carattere restituito dal Tag H1.

Il Title e la SEO

Uno degli elementi tag più importanti di una pagina web è il tag <Title>, sia nell'ottica dell'ottimizzazione sia per quanto riguarda la usabilità della pagina web. Infatti, i principali motori di ricerca, Google compreso, danno una grande rilevanza a quelle che sono le parole chiavi presenti nel titolo di un pezzo, contrassegnato appunto dal tag <Title> in html. Chiunque abbia fatto una ricerca, poi, avrà notato come i motori offrano una risposta alla richiesta mostrando appunto il <Title>, ovvero il titolo che abbiamo dato ad un pezzo e che dunque devecontenere le parole chiave sucui puntare.

Gli spider dei motori di ricerca, infatti, vanno a controllare come primo elemento della nostra pagina web ciò che viene contrassegnato con il tag <Title>, che oltre a contenere la parola chiave, deve essere il più descrittivo possibile dei contenuti presenti nella pagina web in questione.

Sfruttare il Title tag

Come abbiamo visto finora, è molto importante soffermarci sul titolo di un pezzo se vogliamo che la nostra pagina sia facilmente trovata dai motori di ricerca. Il tag <Title> è quello che un browser visualizza nella barra del titolo, non quindi semplicemente la prima riga html che compare. In questo modo, realizzando un titolo molto accattivante, descrittivo, preciso e, naturalmente, contenente la parola chiave, si avrà un migliore piazzamento nelle pagine restituite dai motori in sede di ricerca.

Inoltre, se un visitatore inserisce la nostra pagina web nei segnalibri, avere un <Title> descrittivo ci permetterà di essere trovati con maggiore facilità: infatti è quello che viene automaticamente assegnato alla descrizione del sito in caso appunto di aggiunta ai segnalibri.

Le sue caratteristiche

Oltre a quanto detto finora, occorre sapere che il contenuto non deve essere troppo breve, almeno più di 50 caratteri, né troppo esteso: massimo 80 caratteri, naturalmente includendo gli spazi. Questo permette di entrare nelle grazie del maggior numero di motori di ricerca possibili, che appunto in media preferiscono questa lunghezza.

Attenzione a non usare solo parole chiavi nel titolo, altrimenti un motore di ricerca può considerare la pagina come spam, penalizzandola pesantemente. Massima cura dunque per il contenuto del titolo, che deve indurre il navigatore web a soffermarsi il più a lungo possibile sulla pagina web in questione.

Tutti possono parlare a tutti. È questa la più grande novità (o almeno una delle tante) che ha sconvolto il mondo della comunicazione negli ultimi dieci anni. Chiaramente si sta parlando dell'enorme importanza che ha rivestito (e che riveste) il web nella dinamica comunicativa internazionale. Se prima ci si affidava esclusivamente alla comunicazione tradizionale (televisiva e cartacea) ora il web propone sicuramente un terzo polo molto interessante, da prendere in considerazione per lo sviluppo delle proprie convinzioni e per la risoluzione delle proprie esigenze.

Chiaramente tutto ciò rappresenta un bene per la diffusione di un pluralismo informativo che non ha pari rispetto al recente passato. Chiunque, aprendo un Blog o partecipando attivamente alle discussioni Social, può informare e "fare comunicazione". Del resto quest'aspetto viene visto dagli integralisti dei media tradizionali come un'invasione fatta a scapito di una professione che per certi versi si costruisce attraverso lo studio sui libri e sul campo. Trovare un articolo tecnico (in qualunque campo specialistico) firmato Tizio Sempronio (che di lavoro fa tutt'altro) non semplifica il lavoro di chi vuole informarsi.

Corrispondenza con altri elementi SEO

Se per i lettori la prima regola diviene allora saper filtrare le informazioni che piovono copiose dal web, per chi scrive diventa un dovere quasi imprescindibile quello di verificare le fonti, di scrivere in maniera competente e di produrre contenuti originali. Sappiamo tuttavia che tutto ciò non basta se il Blogger ha come scopo quella di scalare le posizioni di Google (preso ad esempio perché oramai in Italia rappresenta Il Motore di Ricerca per quasi il 90% degli utenti) indicizzando a dovere le proprie pagine web. Ebbene diverrà fondamentale congegnare una corrispondenza, che diverrà imprescindibile, tra il Tag Title (uno dei più importanti per scopi SEO), il Titolo della pagina e la URL della pagina stessa.

Il tag title è infatti il primo elemento che appare nella barra del vostro browser quando entrate in una pagina web; parallelamente riveste un importanza strategica perché, nel momento in cui gli spider dei motori di ricerca vi entrano, è di fatto la prima cosa che valutano per i fini che conosciamo.

Dicevamo della corrispondenza fra i tre elementi; diviene dunque fondamentale adottare un titolo quanto mai più essenziale e asciutto, che sappia identificare una keyword molto ricercata e con pochissima concorrenza (potete verificarlo attraverso lo Strumento delle parole chiavi che mette a disposizione Google). A quel punto sarebbe d'uopo ingegnarsi per costruire anche la URL del vostro pezzo a immagine e somiglianza dei già citati elementi di cui sopra (Google non ama molto le url piene di numeri e punti interrogativi). Se pensate sia un tantino troppo per una persona che "vuole solo scrivere", potete affidarvi a delle Web Agencyper ottimizzare e indicizzare i contenuti del vostro sito web.

Caratteristiche dell'H2

All'interno di una pagina Web, il Tag H2 è necessario per impostare un sottotitolo stampato a video. Il suo uso è altamente consigliato in quanto il Tag H2 è particolarmente apprezzato dagli spider dei motori di ricerca per quanto riguarda l'indicizzazione di una pagina web.

Per questo motivo è bene, al momento della stesura di un testo, utilizzare il Tag H2 per evidenziare determinate parole chiave che funzionano, oltre che da sottotitoli, anche da termini connotativi dell'argomento della pagina.

Sintassi ed utilizzo

Così come per gli altri tipi di Tag, il Tag H2 segue la seguente sintassi nel linguaggio Html:

Pippo paperino

Solitamente, il testo inserito all'interno del Tag H2 viene restituito in un carattere molto più grande del testo normale, e di solito è in grassetto molto marcato. Per questo motivo molti sistemi per editare testi web integrano il Tag H2 all'interno delle proprie funzioni: questo significa che un CSS prevede fra le sue funzioni quelle di evidenziare alcune parole come Tag H2, e dunque come sottotitolo, riuscendo a modificare il carattere in modo da renderlo più coerente graficamente con il resto del testo.

Se avete un sito web e volete implementare fra le varie funzioni necessarie all'indicizzazione anche l'utilizzo dei Tag Hn, potete richiedere servizi del genere ad aziende che si occupano di questo tipo di attività di promozione web: si tratta delle web agency, come Elamedia.it, che mettono al servizio del cliente una serie di tecniche per incrementare le visite ed il traffico a un sito internet.

Cosa scrivere dunque?

Un corretto utilizzo dei tagper l'heading di un articolo serve a fare in modo che i motori di ricerca capiscano che stiamo evidenziando una parte importante del discorso, rilevante ai fini dell'indicizzazione. Per questo motivo è importante scegliere le parole giuste da taggare: di norma utilizziamo all'interno del testo con tag di heading, la parola chiave attorno alla quale abbiamo costruito il pezzo.

Non esistono di certo regole scritte, ma il miglior posizionamento di norma si ottiene utilizzando il seguente schema

• <H1>Parola chiave + testo </H1>
• <H2>Testo introduttivo + Parola chiave alla fine</H2>

Tag dei link

Cosa sarebbe il web senza i collegamenti ipertestuali (anche detti ipertesto o più semplicemente link)? Di sicuro l'architettura di un sito web (ma anche di una semplice pagina) fonda gran parte della sua autorevolezza sulla presenza di link in uscita e in entrata (per la differenza si consiglia di dare un'occhiata alla nostra sezione indicizzazione e ottimizzazione).

Utilizzare il tag giusto per il link

Per creare un link con il linguaggio HTML dobbiamo posizionarci prima della sezione che costituirà la parte "cliccabile" e digitare il tag di apertura <a>, aggiungendo immediatamente l'attributo HREF. A quel punto dovremo digitare la URL corretta che identificherà il nostro approdo e chiudere con il tag </a> come nell'esempio di cui sotto:

<a href="http://www.elamedia.it/">mia pagina</a>

Collegamenti assoluti e relativi

La differenza importante tra i due tipi di collegamento indicati sta nel fatto di collegare tra loro porzioni di codice situate su server differenti oppure sullo stesso server locale. Per creare dei link efficaci nel linguaggio HTML non serve solamente saper usare in maniera corretta i giusti tag, occorre anche e soprattutto seguire delle buone regole che riassumiamo di seguito:

• utilizzare sempre descrizioni brevi, chiare ma indicative rispetto alla destinazione a cui va incontro l'utente
• evitare assolutamente la terminologia stra-usata "clicca qui"

Da sottolineare che, per creare un link che sia accessibile anche ai sistemi di lettura per non vedenti, si può usare l'attributo title, tramite le opzioni di accessibilità di HTML 4.0 secondo l'esempio riportato qui sotto:

<a href=http://www.elamedia.it/ title="la home page del mio sito">mia pagina</a>

Link per un immagine nel linguaggio HTML

La funzione delle immagini in relazione con i collegamenti ipertestuali diviene molto importante quando il web master è portato ad abbellire il documento su cui sta lavorando con delle finestre illustrate ad altre pagine (divengono dunque dei pulsanti di esplorazione e/o delle miniature su cui fare clic). I tag da utilizzare per costruire dei link su delle immagini sono gli stessi che abbiamo visto sopra. L'accortezza sta nella gestione oculata del metodo dell'inclusione, come vediamo nell'esempio di cui sotto:

<a href="http://www.elamedia.it/">

<img src="/images.gif" height="150" wisht="100" alt="elamedia" hspace="30" vspace="20">

</a>

Da sottolineare che l'immagine che viene resa collegamento ipertestuale deve essere riconosciuta come tale. Vanno dunque inseriti dei riferimenti affinché l'utente capisca che si tratta realmente di un immagine che contiene un link ad un'altra pagina.

Elimina la sottolineatura dei link HTML tramite CSS

Alcuni sviluppatori tendono a considerare la sottolineatura dei collegamenti ipertestuali come una sccatura. E' per questo che si tende ad eliminarla (anche se, eliminandola si potrebbe trarre in inganno i meno esperti che si aspettano un link sottolineato per un collegamento). Tramite i fogli di stile CSS basterà assegnare ad un selettore A la proprietà text-decoration: con valore none

I valori che si utilizzazno, rispettivamente per sottolineare e far lampeggiare il testo, sono underline e blink.

Eliminare i bordi di un collegamento

Quando inseriamo un'immagine in un documento HTML e vi associamo un collegamento ipertestuale, noteremo senz'altro che il browser tenderà a aggiungere di default un piccolo bordo all'immagine stessa. Per ovviare a questa problematica occorre inserire l'attributo bourder con valore uguale a 0.

Il colore nel codice html

Sappiamo tutti quanto sia importante donare ad una qualsiasi pagina web un minimo di fascino e gusto estetico. È chiaro che il primo aspetto che un web master deve saper affrontare è certamente la coerenza e l'ordine del proprio template HTML; è altrettanto importante tuttavia saper gestire i colori e le sfumature grafiche all'interno del codice della propria pagina.

Il codice per i colori esadecimali

Dal momento che i 136 colori con nome sono limitati (i PC riescono a gestire milioni di sfumature) suggeriamo di procedere utilizzando l'approccio dei colori esadecimali. Per calcolare il valore esadecimale di un colore occorre individuare (con l'aiuto di un software ovviamente) i suoi valori di rosso, verde e blu. Ora, con una calcolatrice scientifica, digitare il valore relativo al rosso, per poi passare immediatamente in modalità Hex: il valore alfanumerico corrispondente rappresenterà la prima parte del nome del colore esadecimale da utilizzare nel linguaggio html. A quel punto occorrerà ripetere lo stesso procedimento anche per il verde e per il blu.

Come aggiungere un colore di sfondo

Esistono fondamentalmente due possibilità, quando si decide di colorare uno sfondo in una pagina web: si può far riferimento ai colori con nome (di cui mostriamo un esempio nell'immagine che segue, oppure si può far riferimento ai colori adatti al web (scelta consigliata visto che l'opzione porta con sé maggior scelta).

Per aggiungere un colore si sfondo al codice occorre affidarsi all'attributo bgcolor (come nell'esempio di cui sotto) inserendolo immediatamente dopo il tag <body>.

• <body bgcolor='black'> se si utilizza il metodo dei colori con nome
• <body bgcolor='#000000'> se si utilizza il metodo dei colori esadecimali

Cambiare il colore di un testo

Spesso ci si dimentica che, per ottenere un effetto grafico, più che interessante, basterebbe saper combinare correttamente il colore di un testo con quello dello sfondo. Anche per quel che concerne il colore del testo il procedimento prevede che si scelga l'utilizzo del metodo dei colori con nome o del metodo dei colori esadecimali. Per il resto, l'attributo da utilizzare assieme al tag <body> è text (come nell'esempio riportato di seguito):

• <body text='black'> se si utilizza il metodo dei colori con nome
• <body text ='#000000'> se si utilizza il metodo dei colori esadecimali

Da notare che con questo metodo si applica lo stesso colore a tutta la pagina. Ovviamente per cambiare il colore della singola parola si deve far riferimento al tag <font> e all'attributo color (come nell'esempio sotto).

• <font color="black">testo nero</font> se si utilizza il metodo dei colori con nome
• <font color="#000000">testo nero</font> se si utilizza il metodo dei colori esadecimali

Cambiare colore ai link

Nell'articolo relativo ai tag da utilizzare per i link abbiamo descritto l'importanza di rendere ben distinguibili, all'interno di un testo, i collegamenti ipertestuali che portano all'esterno. Un modo per centrare l'obiettivo è certamente quello di assegnare ai link un colore differente rispetto a quello di default. Se si volesse cambiare il colore dei link, in maniera uniforme rispetto alla nostra pagina, allora dovremmo utilizzare, dopo il tag <body>, l'attributo link con il relativo colore (come nell'esempio riportato di seguito):

• <body link='black'> se si utilizza il metodo dei colori con nome
• <body link ='#000000'> se si utilizza il metodo dei colori esadecimali

Come prima: utilizzando questo metodo si applica lo stesso colore ai link di tutta la pagina. Per modificare il colore del singolo link si deve far riferimento al tag <font> e all'attributo color (come nell'esempio sotto).

• <a href="http://www.elamedia.it"><font color="black">testo nero</font></a> se si utilizza il metodo dei colori con nome
• <a href="http://www.elamedia.it"><font color="#000000">testo nero</font></a se si utilizza il metodo dei colori esadecimali

Cambiare il colore dei collegamenti visitati e attivi

Sempre nell'ottica di rendere attrattivo e meno asettico il nostro codice HTML, potremmo voler modificare il colore dei link visitati e dei link attivi, rispettivamente quelli che vengono cliccati dall'utente e quelli che invece vengono toccati appena dal mouse dell'utente. Se per i primi occorre utilizzare l'attributo vlink, per i secondo l'attributo corretto sarà alink (il loro utilizzo sarà lo stesso che abbiamo studiato in precedenza con l'attributo link: la loro posizione sarà all'interno del tag <body>).

Linguaggio HTML: attenzione all'usabilità

Una volta definite le tipologie di carattere da prediligere rispetto alle altre per un testo online, descritte nella pagina Font Web HTML, suggeriamo le regole relative ai colori da utilizzare in un testo per il web. Colori testo web. Soprattutto nei siti informativi e di carattere editoriale, è consigliabile per il testo prediligere il colore nero o blu scuro. E' possibile mettere in risalto qualche parola con un colore differente, ma attenzione a non esagerare; la scelta di un secondo colore per il testo spesso interessa i link presenti nella pagina. In generale, meglio scegliere due soli colori, uno per il testo e uno per le parole-link da mettere in evidenza.

Usabilità

Dal punto di vista dell'usabilità, il colore del font rappresenta sicuramente, assieme alle tecnologie assistive, un aspetto da non sottovalutare. Utenti che abbiano difficoltà nella percezione dei colori, che siano affetti da epilessie fotosensibili o che comunque mostrino una qualsiasi difficoltà cognitiva legata alla percezione visiva, mostreranno certamente gratitudine se userete, sul vostro sito, dei colori chiari e posizionati in netto contrasto con il resto dell'ambiente grafico. Un grafico non deve veder sminuito il suo lavoro se 'incatenato' alle 'costrizioni' dell'accessibilità.

Provate comunque a sperimentare sui colori che usate per i vostri font (vi accorgerete che bastano davvero poche persone per gestire questi esperimenti con successo). La percezione del colore e della luce è per l'appunto non omogenea per tutti e spesso i colori cambiano di aspetto anche in base ai colori che li circondano.

Nel mondo digitale le sfumature non si ottengono per mescolanza dei colori primari ma per aggiunta di stimoli luminosi. Da sottolineare che, attraverso due browser differenti, lo stesso colore potrebbe apparirvi differente: è infatti molto difficile riprodurre lo stesso colore attraverso anche solo dei media differenti.

Pensiamo davvero molto ai colori da scegliere per i nostri font: ogni colore ha infatti un suo peso neurofisiologico e emozionale. Si scelgono, in questo senso, dei colori vicini al rosso per indicare pericolo e inibizione.

Dal punto di vista tecnico, legato al linguaggio html, la scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere, dal momento che "face" e "color" sono entrambi attributi del tag <font>. Altro fattore molto importante da tener presente è legato al contrasto di colore tra sfondo della pagina e colore del font; la migliore leggibilità si ottiene pubblicando un testo nero su sfondo bianco o viceversa. Curiosità: la 'peggiore' leggibilità si ottiene utilizzando un testo azzurro su sfondo di colore fucsia. Visita il sito ElaMedia per maggiori dettagli.

Come aggiungere Frame e Frameset

I frame vengono utilizzati dagli sviluppatori di codice per creare strutture e sistemi di esplorazione precisi. Di solito si fa riferimento ai frame per bloccare determinate sezioni di una pagina e per visualizzare documenti collegati ad altre sezioni ancora. Quest'approccio può esser utilizzato per creare delle barre di menù e/o dei riquadri speciali.

Documento basato su frame

I frame utilizzano un documento di controllo generale denominato frameset che determina appunto la creazione e la visualizzazione del layout da parte del browser. Questo documento lavora utilizzando almeno due file HTML posizionati a loro volta all'interno del frame stesso. Prima di applicare i singoli frame alla struttura delle pagine occorre dunque definire il documento di base (il frameset). Questo documento in linguaggio html non viene mai visualizzato in un browser; è possibile crearlo utilizzando il seguente schema:

• Creare le sezioni necessarie per una pagina in linguaggio html (ricordando di sostituire ai tradizionali tag body quelli relativi al frameset):

<html>

<head>

<title> Titolo frameset </title>

</head>

<frameset>

</frameset>

</html>

• A questo punto occorre salvare il documento denominandolo in base alle impostazioni predefinite indicate dal server (index.html o default.htm).

Aggiungere i singoli frame

A questo punto occorre inserire i frameset tutti i frame di cui abbiamo bisogni. Se già si dispone di una pagina in linguaggio html contenente un menù di esplorazione e un'altra con il testo principale del sito, occorre aggiungere il tag frame seguito dalla posizione e dal nome del file da inserire nel frameset (si veda l'esempio di cui sotto).

• Aggiungi i vari frame nel frameset contenuto dal documento:

<html>

<head>

<title> Titolo frameset </title>

</head>

<frameset>

<frame src='menu.html'>

<frame src='main.html'>

</frameset>

</html>

• Una volta salvato il file, i frame non apparirebbero perché non sono state ancora aggiunte le informazioni relative alle righe e alle colonne di riferimento.

Suddividere in colonne un Frameset dinamico

Le pagine basate su Frameset possono adattarsi al foglio HTML a seconda della dimensione concessa dal browser. Chiaramente, se si opta per la dinamicità del Frameset, occorre far riferimento almeno ad un elemento fisso nella pagina che faccia da punto di riferimento.

I Frame possono essere suddivisi in più righe e colonne. Mettiamo il caso di avere una pagina suddivisa in due colonne (la prima con larghezza fissa che contiene per esempio il frame che abbiamo creato nel paragrafo di cui sopra e la seconda con larghezza dinamica).

• Per prima cosa apriamo il frameset creato tramite la guida del paragrafo precedente e nel tag <framest> aggiungiamo l'attributo cols come nell'esempio che riportiamo sotto. Dopo aver indicato la larghezza specifica, inserire i simboli ,* che indicano appunto ai frame di mantenere un comportamento dinamico.

<html>

<head>

<title> Titolo frameset </title>

</head>

<frameset cols='200,*'>

<frame src='menu.html'>

<frame src='main.html'>

</frameset>

</html>

• Dopo aver salvato il documento nella cartella che contiene i file sorgenti e ovviamente quelli relativi ai nostri menù, avremo la possibilità di visualizzare il tutto nel browser.

Suddividere in colonne un frameset fisso

In un frameset fisso tutti gli elementi hanno dimensioni specifiche. Tutto ciò permette di visualizzare delle barre di scorrimento nel momento in cui il browser non è in grado di supportare la larghezza impostata (è per questo che solitamente i frameset vengono impostati alle minime dimensioni gestite da ogni risoluzione). Per fissare le dimensioni delle varie colonne basterà aggiungere dei valori dopo l'attributo cols (la larghezza totale non dovrebbe superare i 585px; per non incorrere in problemi di visualizzazione).

Suddividere in righe un frameset dinamico

Suddividere in righe un frameset dinamico è una buona scelta nel momento in cui scegliamo di rendere fisso un menù (nella parte superiore o inferiore della pagina) che introduce una parte della pagina che invece rimane dinamica.

• Per far tutto ciò occorre utilizzare l'attributo rows come nell'esempio di cui sotto.

<html>

<head>

<title> Titolo frameset </title>

</head>

<frameset rows='200,*'>

<frame src='top.html'>

<frame src='main.html'>

</frameset>

</html>

• Ovviamente sarà necessario specificare l'altezza della prima riga, aggiungendo i simboli *' per specificare il fatto che la seconda riga risulterà invece dinamica.
• A questo punto occorrerà salvare il frameset e accertarsi che i file che riguardano i contenuti del frame si trovino nella Directory principale.

Dividere in righe un frameset fisso

Fissare l'altezza delle righe ci aiuta a controllare la struttura del nostro codice, determinando in precedenza l'inizio e la fine di ogni riga. I vantaggi di quest'operazione sono nel fatto che si possono creare strutture fisse in righe diverse mentre gli svantaggi sono riconducibili al fatto che si è limitati a lavorare con una risoluzione pari a 295px, la sola ad essere supportata da qualsiasi schermo. Come vediamo nell'esempio di cui sotto, procediamo specificando l'altezza della prima e della seconda riga:

<frameset rows='100,195'>

<frame src='top.html'>
<frame src='main.html'>

</frameset>

Unire righe e colonne

Per far apparire, per esempio, un menù di esplorazione e/o delle intestazioni in un riquadro statico, lasciando come unica sezione dinamica il contenuto del sito, potremmo aver bisogno di nidificare i frameset.

Definiamo prima di tutto le righe e i file che ci verranno inseriti: nell'esempio di cui sotto viene creato un menù di esplorazione fisso per la riga superiore e un frame dinamico più in basso.

A questo punto definiamo le colonne nidificando un tag <frameset> (una colonna per l'esplorazione e una per il contenuto principale).

<frameset rows='100,*'>

<frame src='top.html'>

<frameset cols='200,*'>
<frame src='nav.html'>
<frame src='main.html'>
</frameset>

</frameset>

Volete fare un pò d'esercizio? Provate il servizio che propone la W3Schools e fateci sapere che ne pensate.

La formattazione dei tag di commento

Il linguaggio html ha le sue regole. Anche i tag di commento (come del resto ogni altro tag) vengono dunque identificati da una ben specifica formattazione: sono racchiusi dai simboli

<! - - commento - - >

Da notare ovviamente che il contenuto di un tag di commento non verrà interpretato in alcun modo dal browser che usa l'utente (proprio per questo se ne consiglia l'utilizzo per nascondere delle informazioni specifiche riguardanti script e fogli di stile che vengono utilizzati nel documento).

Informazioni sull'identità

Da sottolineare come sia possibile (e consigliabile) usare i tag di commento all'interno del linguaggio html per gestire la diffusione di alcune informazioni sull'identità del proprietario del codice e/o dettagli su come contattarlo. Oltre a questo segnaliamo la scelta di alcuni Web Master che inseriscono, nei commenti, delle informazioni sui marchi di fabbrica, sui diritti d'autore e/o su qualsiasi altro dettaglio relativo al codice della loro pagina.

Se ti è piaciuto questo articolo, leggi anche i nostri approfondimenti su Tag Title, ALT delle immagini e Tag Header.

Mi raccomando… se hai bisogno di una Consulenza sul Web Marketing, valuta la possibilità di contattarci al numero che vedi qui sulla destra.

FAQ sul linguaggio HTML

Cos'è il linguaggio HTML?

HTML sta per "HyperText Markup Language" ed è un linguaggio di markup utilizzato per creare pagine web. Il codice HTML descrive la struttura di una pagina web utilizzando tag, attributi e valori.

Quali sono i tag HTML più comuni?

Ci sono molti tag HTML disponibili, ma alcuni dei più comuni includono <html>, <head>, <title>, <body>, <h1>-<h6> per i titoli, <p> per i paragrafi, <a> per i link, <img> per le immagini e <div> e <span> per la creazione di layout.

Qual è la differenza tra tag aperti e chiusi in HTML?

I tag HTML possono essere aperti o chiusi. Un tag aperto viene utilizzato per indicare l'inizio di un elemento e viene scritto come "<tag>". Un tag chiuso viene utilizzato per indicare la fine di un elemento e viene scritto come "</tag>". I tag chiusi sono necessari per chiudere l'elemento e assicurarsi che venga visualizzato correttamente nella pagina web.

Se ti è piaciuto questo articolo, leggi anche la nostra guida su quali sono le keyword long tail e come scrivere una buona meta description.

Una cosa molto importante quando si deve scrivere per il web è l'originalità dei contenuti che si può verificare con un tool, perciò abbiamo creato questa guida all'utilizzo di Copyscape e se hai bisogno di maggiori informazioni per scrivere un guest post con le anchor text adatte? Non esitare a contattare ElaMedia Group!

Se hai bisogno di realizzare una landing page personalizzata per promuovere il tuo progetto web non esitare a contattarci al numero verde 800 119 270.