struttura di una pagina html

+

Diamo vita al tuo portale web, gestiamo la tua

visibilità online, promuoviamo il tuo business

+ 2 Chi siamo

ElaMedia Group è una Web Agency di Roma che si occupa di:

• Gestire dei portali di proprietà

• Promuovere l'attività dei propri clienti

• Creare e gestire portali web

• Proporre dei corsi di formazione (filiere ICT e

Comunicazione e Marketing)

05/01/201

5 Enrico Mainero - www.elamedia.it

2

+ Doctype

• La dichiarazione del Doctype e obbligatoria in ogni

documento HTML.

• Specifica la sintassi che si utilizzerà nella pagina.

• Non e parte del documento e dunque non ha bisogno del tag

di chiusura.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

05/01/201


3

+ La struttura HTML di una pagina

Le due sezioni principali di un documento HTML sono quelle

relative a HEAD e BODY (tenute assieme appunto

dall’elemento HTML).

05/01/201


4


Un documento HTML è normalmente diviso in due sezioni:

Testa (<head>)

Corpo (<body>)

Contiene informazioni non immediatamente percepibili, ma

che riguardano il modo in cui il documento deve essere letto e

interpretato. Questo è il luogo dove scrivere – ad esempio – i

meta-tag (alcuni sono ad esclusivo beneficio dei motori di

ricerca), script JavaScript o VbScript, fogli di stile, eccetera

05/01/201


5


Qui è racchiuso il contenuto vero e proprio del documento vari

anni di Web hanno fatto nascere l’esigenza di separare il

contenuto dalla presentazione del contenuto medesimo.

Se per esempio io avessi tutti i titoli del mio documento in

rosso e in grassetto, e a un certo punto decidessi di trasformarli

in verde e in corsivo, con l’HTML classico (cioè l’HTML 3.2)

dovrei andare a modificarmi a mano ogni tag contente le

indicazioni della formattazione.

05/01/201


6

+ Elemento <head>

Contiene:

• Il titolo del documento

• Alcuni elementi utili ai motori di ricerca. Utilizzando il tag

<meta> nello header si ha la possibilità di aggiungere alla

pagina anche alcune parole chiave e una breve descrizione

del contenuto

05/01/201


7

+ Elementi opzionali nella Head

Elementi per codice social

Elementi per codice tool webmaster di google e analytics

index.php nella cartella dei template

05/01/201


8

+

Elemento <title>

Rappresenta il titolo del

documento ed è molto

importante a livello SEO.

• Deve descrivere al meglio il

contenuto della pagina.

• Deve essere compresso in non

più di 80 caratteri.

• Deve contenere la parola

chiave e una Call to action.

05/01/2015 Enrico Mainero - www.elamedia.it

9

+ 10

Tag <title>


E’ quello che un browser visualizza nella barra del titolo e si trova tra le prime righe del codice HTML.

Nei risultati di ricerca, le pagine appaiono con Title + Meta description + URL.

Scegliere un titolo accattivante, descrittivo, preciso e, naturalmente, contenente la parola chiave

10

+ Elemento meta

Informazioni di contorno su un documento, diverse dal

contenuto di un documento.

Esistono quattro differenti tipologie di meta tag:

• meta tag description

• meta tag keywords

05/01/201


11

+ 12 Meta Tag nel linguaggio HTML

I meta tags devono essere inseriti tra gli operatori <head> e

preferibilmente posti dopo il </title>, come in questo esempio:

<html>

<head>

<title>titolo pagina web</title>

<meta name="description" content="descrizione ">

<meta name="keywords" content="keyword">

</head>

<body>

il contenuto visibile della pagina web.

</body>

</html>

05/01/201


12

+

13 Meta tag description

Lo scopo del meta tag

description è quello di

specificare ulteriormente il tema

che viene illustrato nella pagina

web.

La maggior parte dei motori di

ricerca, punisce i siti che hanno

delle meta tag non pertinenti con

il contenuto della pagina.

Ha il compito di illustrare il

contenuto della pagina web. La

descrizione in esso contenuta

deve essere al massimo di 150

caratteri.

Una buona descrizione aumenta

il CTR in SERP


13

+ 14 Meta tag Keywords

Descrivono il contenuto della nostra pagina e servono ai

motori di ricerca non tanto per il posizionamento dei nostri siti,

quanto per individuare l'argomento trattato nella nostra

pagina.

Non usare parole chiave lontane

dal contenuto primario delle

nostre pagine. I motori di

ricerca potrebbero

penalizzarci peggiorando il

nostro posizionamento

o, peggio, cancellandoci dalle

liste di indicizzazione.

05/01/201


14

+

Tipologie di tag

+ Elementi di blocco

Sono sostanzialmente gli elementi che costituiscono un blocco

attorno a sé, e che di conseguenza vanno a capo, come i

paragrafi, le tabelle, le form, ma soprattutto i div.

Sono gli elementi che – non andando a capo – possono essere

integrati nel testo, come i collegamenti o le immagini, oppure

gli span

05/01/201


16

+

Allineare un testo

HTML

Si può allineare un testo HTML

combinando all’elemento <div> o

all’elemento <p> l’attributo align.


17

+ Allineare un testo HTML

Il valore è 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 al sinistra)

• right (per allineare il testo al 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à)

05/01/201


18

+ Elemento <p>

Il testo all'interno della pagina HTML viene solitamente

separato in paragrafi contenuti all'interno del tag <p>:

<body>

<p>testo del primo paragrafo</p> <p>testo del secondo paragrafo</p>

</body>

Definisce un paragrafo. Non si dovrebbero utilizzare elementi

<p> vuoti.

• E’ alla base della struttura della nostra pagina.

• Da utilizzare per dividere in paragrafi un testo

• Permette di alleggerire la lettura dell’utente

05/01/201


19

+ Le caratteristiche di <p>, <div> e <span>

• <p> lascia spazio prima e dopo la propria chiusura

• <div> non lascia spazio prima e dopo la propria chiusura, ma

– essendo un elemento di blocco – va a capo

• <span> – essendo un elemento inline – non va a capo

05/01/201


20

+

L’interruzione delle

righe

Aggiungere il tag <br> al termine della

riga che si vuole interrompere.

ElaMedia<br>

Via Dino Penazzato, Roma<br>

www.elamedia.it<br>


21

+

Intestazioni e paragrafi

+

Tag header

Un elemento di intestazione descrive l'argomento della sezione che introduce.

Vi sono sei livelli di intestazione:

• <h1> il più “importante”

• <h6> il meno “importante”

L’ordine di posizionamento dei titoli deve esser rispettato:

uno o più elementi <h2> devono seguire un elemento <h1>, mentre uno o più elementi <h3> devono seguire elementi <h2>


23

+ Tag header e SEO

I tag header hanno lo scopo di fornire informazioni di vario genere utili ad

ottimizzare meglio l'ipertesto in questione.

05/01/201


24

+ Ottimizzazione dei tag header

Un corretto utilizzo dei tag <h1> e <h2> per un testo HTML

aiuta a far in modo che i motori di ricerca capiscano che stiamo

evidenziando una parte importante del discorso.

Il miglior posizionamento di norma si ottiene utilizzando il

seguente schema:

05/01/201


25

+ 26 Tag Font

La formattazione del testo in tutti i siti moderni viene attribuita

attraverso i fogli di stile.

L’utilizzo del tag <font> è disapprovato dal W3C, e dunque sta

cadendo in disuso. In ogni caso si tratta di un argomento che un

buon webmaster non può ignorare.

Enrico Mainero - www.elamedia.it

26

05/01/201

5

+

Utilizzo del tag

<font>

Optare per uno stile di scrittura

semplice.

• Si può affermare che non esistono

font esteticamente più belli di altri,

ma che alcune tipologie di font

siano più consigliate per il web

• Si consiglia Arial, Courier e Verdana

come font più leggibili e Georgia e

Times New Roman come font più

attrattivi.


27

+ La grandezza del Font

La grandezza dei caratteri è altrettanto importante e dovrebbe

oscillare tra 10 e 12 pixel.

Per quanto riguarda il font per il web, è importante ricordare di

evitare il testo in movimento e prediligere l'uso dei testi statici.

05/01/201


28

+ Questione di usabilità

E’ molto importante saper gestire i colori e le sfumature

grafiche all’interno del codice della propria pagina.

Un 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.

05/01/201


29

+

Il formato dei colori

I colori in HTML si possono

esprimere:

• in formato RGB (Red Green

Blue): metodo utilizzato da

gran parte degli editor per le

elaborazioni delle immagini

• A ciascuno dei tre colori è possibile

assegnare un valore compreso tra "00"

e "FF" (corrispondenti a 0 e 255) in

modo da ottenere la tonalità

desiderata. Si ottengono dei codici di

sei cifre preceduti dal simbolo #.

• indicandone il nome (non

compatibile per tutti i

browser, permette di indicare

direttamente il colore

desiderato).


30

+ Lo sfondo

In HTML possiamo impostare un colore di sfondo è utilizzando

il relativo attributo del tag body.

Così:

<body bgcolor="blue">

non è consigliabile inserire la notazione del colore facendo

riferimento a questo tipo di sintassi, dal momento che non

possiamo sapere esattamente a quale tonalità di colore

corrisponda il blu del computer dell’utente.

05/01/201


31

+ Lo sfondo

È preferibile in molti casi utilizzare la corrispondente codifica

esadecimale del colore, Per inserire un’immagine come sfondo

è sufficiente utilizzare la seguente sintassi:

<body background=”imgSfondo.gif”>

L’immagine in questo caso è nella stessa cartella del file. È

importante assegnare sempre un colore alla pagina anche

quando lo sfondo della pagina è bianco (al massimo assegnare

bgcolor=”#FFFFFF”).

05/01/201


32

+ 33

Font e colore

E’ consigliabile prediligere il colore

nero o blu scuro.

In generale, meglio scegliere due soli

colori, uno per il testo e uno per le

parole-link da mettere in evidenza.


33

+ Cambiare colore al Font

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

05/01/201


+ Grassetto, sottolineato e corsivo

I tag per gli attributi relativi al testo sono i seguenti :

• <b> per il grassetto (è importante anche dal punto di vista

SEO, per evidenziare le parole chiave che appunto vengono

“sfruttate” per indicizzare una determinata pagina web)

• <i> per il corsivo

• <u> per il sottolineato

05/01/201


35

+

Le liste

L'HTML offre diversi strumenti per

specificare degli elenchi di

informazioni.

Nel web vengono spesso organizzati i

contenuti delle pagine attraverso degli

elenchi puntati e/o numerati.

Il tag <ul> crea un elenco puntato

mentre quello <ol> un elenco

numerato.


36

+ Creare un elenco puntato

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)

Infine occorre chiudere l’elenco puntato con il tag di

chiusura </ul>

05/01/201


37

+ Creare un elenco numerato

La procedura rimane la stessa dell’elenco puntato:

• 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)

• Infine occorre chiudere l’elenco puntato con il tag di

chiusura </ol>

05/01/201


38

struttura di una pagina html

Internet