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
5
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
5
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
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
5
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
5
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
5
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/2015Enrico 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
5
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
5
12

+
13Meta 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
5
14

+ 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
5
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
5
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
5
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
5
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

+
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
5
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
5
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.
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
5
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
5
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
5
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
5
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
5

+ 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
5
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
5
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
5
38

Struttura di una pagina html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Struttura di una pagina html

Similar to Struttura di una pagina html (20)

More from Enrico Mainero

More from Enrico Mainero (11)

Struttura di una pagina html