Guida introduttiva al codice 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

+ 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


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


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

+ 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


6

+

Cos’è l’HTML

+ 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


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


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


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


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


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


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


14

+

Contenuto HTML

+ 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


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


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


18

+ Tag principali (immagine o scansione)

05/01/201


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


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


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


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


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


24

+ Editor più usati

Dreamweaver della Macromedia

FrontPage della Microsoft – Sporca molto il codice

Golive di Adobe – in disuso

05/01/201


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


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


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


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


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


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="miaImmagine.gif" alt="alt">

05/01/201


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/2015 Enrico 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/2015 Enrico Mainero - www.elamedia.it

33