�ݺ�ߣ

+
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

+ Come funziona un browser
E’ composto da sezioni indipendenti che, in sequenza, trattano i
dati e interpretano i vari linguaggi presenti nella pagina:
• caricano un documento HTML
• leggono le istruzioni contenute nel testo, le correggono e le
trasformano in oggetti specifici
05/01/201
5
3

+ I compiti del browser
Il Browser è il programma che usate quando navigate nel Web
e svolge principalmente due compiti:
• scarica i vari file che si trovano su un computer remoto (il
server) e che fanno riferimento a un certo indirizzo
• legge i documenti scritti in html, e a seconda delle indicazioni
ivi contenute, visualizza la pagina in un modo, piuttosto che in
un altro; inoltre i vari files associati a quel documento (ad
esempio le immagini, o i filmati in flash) vengono disposti
secondo le indicazioni del codice html
05/01/201
5
4

+ Rendering
Uno dei lavori più difficili è quello di riuscire a far vedere
correttamente il proprio sito con i browser e le piattaforme più
svariate. La visualizzazione di un file html da parte del browser
prende il nome di rendering della pagina.
Il motore di rendering è dunque quella sezione del browser
che si occupa di mostrare sul video la pagina.
Il compito del linguaggio HTML è dunque quello di spiegare al
browser come i vari files relativi al documento in esame
devono essere disposti all’interno della pagina che stiamo
visualizzando.
05/01/201
5
5

+ Cosa fa un browser?
• Il browser visualizza la struttura dei dati della pagina
attraverso gli attributi di default dei linguaggi che conosce.
In questo modo, oggetto per oggetto, va a formare tutta la
rappresentazione grafica del sito che si intende visitare
• E’ programmato per caricare diversi file in contemporanea,
quando incontra dei tag specifici che li richiamano (come i
file javascript, css, xsl, immagini, ecc...)
05/01/201
5
6

+ L’HTML
Linguaggio di markup usato per la formattazione di documenti
ipertestuali disponibili nel web.
Il termine marcatura deriva dall'ambiente tipografico dove si
usava marcare con annotazioni le parti del testo che andavano
evidenziate allo scopo di segnalarle al compositore.
05/01/201
5
8

+ La storia
HTML nasce negli anni '90 con scopi scientifici (CERN)
Dal 1994 il suo sviluppo diventa prerogativa del W3C
Dal 1998 partono le specifiche dello standard HTML4
Grazie al nuovo HTML5 non serve più una sintassi XML
Lo sviluppo del nuovo HTML5 inizia nel 2004 grazie alla
collaborazione fra i membri del WHATWG e dopo 3 anni del
W3C.
05/01/201
5
9

+ La storia
La sintassi HTML è decisa dal World Wide Web Consortium
(W3C).
È stato sviluppato verso la fine degli anni ottanta da Tim
Berners-Lee al CERN di Ginevra assieme al noto protocollo
HTTP
Prima forte diffusione negli anni 90 in seguito ai primi utilizzi
commerciali del web.
Caratteristiche HTML:
• Definire contenuto logico del documento
• Stabilire l'orientamento dei contenuti non su basi "grafiche" o
di "aspetto”
• Può essere visualizzato diversamente a seconda dei dispositivi
• Ha contribuito alla massima diffusione di Internet
05/01/201
5
10

+ Introduzione all’HTML
L’HTML non ha meccanismi che consentono di prendere delle
decisioni (“in questa situazione fai questo, in quest’altra fai
quest’altro”), e non è in grado di compiere delle iterazioni
(“ripeti questa cosa, finché non succede questo”), né ha altri
costrutti propri della programmazione.
05/01/201
5
11

+ Introduzione all’HTML
• di fatto l’HTML verrà utilizzato ancora per diversi anni come
linguaggio principe delle pagine web
• alcuni concetti dell’XHTML richiedono già una certa
comprensione dei problemi che si acquisisce solo con
l’esperienza. L’HTML è più immediato e consente di
incominciare subito a produrre documenti web
• chi conosce l’XHTML non può non conoscere l’HTML. La
conoscenza dell’HTML è infatti il prerequisito essenziale di
ogni webmaster. Comunque le differenze tra i due linguaggi
non sono così marcate e passare dall’uno all’altro non
dovrebbe richiedere molta fatica.
05/01/201
5
12

+ Formattazione
Ogni pagina, per essere visibile sul Web, deve essere
formattata adeguatamente.
Nel nostro caso, inseriamo dei marcatori, detti tag, che
descrivono caratteristiche come la funzione, il colore, le
dimensioni, la posizione relativa all'interno della pagina.
Il documento HTML ed i file ad esso collegati vanno a costituire
i contenuti delle pagine web. Attraverso il browser si scarica
da uno o più web server, la pagina, per poi interpretare il
codice sorgente, al fine di generare la visualizzazione, sullo
schermo dell’utente, della pagina stessa.
05/01/201
5
13

+ Linguaggio di programmazione?
No ma supporta l'inserimento di script e oggetti esterni quali
immagini o filmati.
Punto HTML (.html) o punto HTM (.htm) è anche l'estensione
comune per riconoscere i documenti in questo formato.
05/01/201
5
14

+ Gli elementi dell’HTML
Una pagina HTML è definita come MARKUP, insieme di
elementi e testo.
Un ELEMENTO è formato da una coppia di TAG (di apertura e
chiusura)
Ogni TAG è una informazione sulla struttura semantica del
testo ad esso collegato.
Esempio
Tag “a” definisce la presenza di un link verso un'altra pagina
HTML.
05/01/201
5
16

Ogni TAG può essere dotato di ATTRIBUTI
ATTRIBUTO è una proprietà composta da nome + valore per
migliorare la denotazione dell'elemento.
Esempio
Attributo “href” indica l'indirizzo effettivo della pagina che si
intende raggiungere con il link.
05/01/201
5
17

L'intera rappresentazione ad albero, con riferimenti annidati
all'interno è il DOM (Documento Object Model) composta da
tutti gli elementi del Markup, a partire dal tag html il quale
include i tag body + head.
Tutti questi tag sono gli elementi base di ogni documento
HTML.
05/01/201
5
18

+ Tag principali (immagine o scansione)
05/01/201
5
19

+ Strumenti per scrivere codice
• La disposizione dei tag nella pagina HTML deve seguire uno
schema di annidamento rigoroso, analogo a quello delle
parentesi in un'espressione matematica.
• Un valido editor HTML (l’ideale sarebbe poter gestire un
editor che possa colorare in maniera differente i vari tag
HTML e che dunque permetta di riconoscerli in maniera più
intuitiva)
• Diverse versioni dei Browser più comuni
05/01/201
5
20

+ I moderni editor
Attualmente il lavoro di HTML è delegato ad applicazioni e
software specifici, come CMS e editor WYSIWYG.
Il codice è generato automaticamente attraverso un pannello di
controllo.
Ciò determina una minore precisione e pulizia del codice.
05/01/201
5
21

+ Editor: Notepad ++
Notepad++ è stato concepito per essere utilizzato
prevalentemente per la stesura di codice HTML e XML ed ha
opzioni, funzionalità e strumenti rivolti in modo particolare a
questi due linguaggi, pur rivelandosi adatti anche ad altre
sintassi.
http://notepad-plus-plus.org/
05/01/201
5
22

Da sottolineare la presenza dei pratici comandi Salva sessione
e Apri sessione, che permettono di memorizzare e recuperare
in un attimo intere sessioni di lavoro.
Infine, oltre ai collegamenti ai file più recenti, si trovano le
opzioni Stampa e Stampa subito!” per mettere su carta ciò che
appare a video secondo la logica WYSIWYG. Fa scegliere il
tipo di layout di un documento in funzione del linguaggio,
riscontrando quanto sia ampio l’elenco predefinito. Notepad++
è infatti in grado di discernere tra un numero decisamente
elevato di linguaggi di programmazione.
05/01/201
5
23

Consente inoltre di selezionare anche quello personalizzato
dall’utente.
Notepad++ propone un ampio elenco di strumenti di
elaborazione personalizzabili ad hoc per automatizzare i
processi ripetitivi e velocizzare la fase di sviluppo, potendo in
particolare contare sulle funzionalità avanzate dell’editor
Scintilla
05/01/201
5
24

+ Editor più usati
Dreamweaver della Macromedia
FrontPage della Microsoft – Sporca molto il codice
Golive di Adobe – in disuso
05/01/201
5
25

+ Schema HTML
• Ha un insieme fisso di tag:
• il testo racchiuso all'interno di numerosi elementi di con-
tenimento caratterizzati da due parentesi angolari
(i simboli < e >)
• Alterna al testo vero e proprio alcuni marcatori descrittivi
che contengono informazioni strutturali e semantiche.
05/01/201
5
26

+ HTML: i marcatori
Un tag è composto da:
Nome
• ne identifica il tipo
Attributi
• valori associati agli elementi
Contenuto
• Per esempio testo
05/01/201
5
27

+ Attributi
In quasi tutti i tipi di tag è possibile inserire uno o più attributi
per definire alcune impostazioni relative al contenuto del tag
stesso
Gli attributi devono essere inseriti dopo il nome del tag e sono
composti da due parti:
• la prima, a sinistra del simbolo =, è il nome dell'attributo
• la seconda, a destra del simbolo = e compresa tra due simboli
“ è l'argomento:
<tag attributo="argomento">
05/01/201
5
28

+ Chiudere i tag
La maggior parte dei tag necessita di essere chiusa mediante un tag
di chiusura, ovvero un tag identico a quello di apertura, eccezion fatta
per il simbolo /
Anche gli elementi vuoti devono essere chiusi
05/01/201
5
29

+ Annidamento e indentazione
Una caratteristica importante del codice HTML è che i tag possono essere
annidati l’uno dentro l’altro. Anzi molto spesso è necessario farlo.
Ad esempio:
<TAG1 attributi>
contenuto 1
<TAG2>contenuto 2</TAG2>
</TAG1>
L’annidamento ci permette quindi di attribuire formattazioni successive al
testo che stiamo inserendo. Come si può vedere già nell’esempio, è una
buona norma utilizzare dei caratteri di tabulazione (il tasto tab a sinistra
della lettera Q) per far rientrare il testo ogni volta che ci troviamo in
presenza di un annidamento e man mano che entriamo più in profondità
nel documento.
05/01/201
5
30

+ Esempio
<TAG attributi>contenuto</TAG>
<P align="right">testo</P>
dall’esempio è evidente che la struttura di un attributo è:
attributo="valore". Quindi in definita la struttura di un tag sarà:
<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>
Alcuni particolari tag non hanno contenuto – perché ad
esempio indicano la posizione di alcuni elementi (come il tag
delle immagini) -, conseguentemente questi tag non hanno
neanche chiusura. La loro forma sarà dunque:
<TAG attributi>
<IMG widht="20" height="20" src=/enricomainero/guida-introduttiva-al-codice-html/"miaImmagine.gif" alt="alt">
05/01/201
5
31

+
Tag di commento
Non sono presi in considerazione
dai browser.
Sono utilizzati per aggiungere
considerazioni o istruzioni
all'interno del codice, in modo da
semplificare l'organizzazione del
lavoro.
Essi hanno la seguente struttura:

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

+
Tag di commento
Un’altra strategia importante, per
rendere il nostro codice più leggibile è
quella di inserire dei “commenti” nei
punti più significativi: si tratta di
indicazioni significative per il
webmaster, ma invisibili al browser.
Inserendo i commenti in punti specifici
del documento ci permette di
mantenere l’orientamento anche in file
molto complessi e lunghi. La sintassi è
la seguente:

e ci permette di “commentare” i vari
punti della pagina. Ad esempio:


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

�ݺ�ߣ

Guida introduttiva al codice HTML

More Related Content

Guida introduttiva al codice HTML