UA3 LEZ2 Introduzione all'HTML
UA3 LEZ2 Introduzione all'HTML
Reti di computer e
programmazione statica nel
web
Unità di apprendimento 3
Lezione 2
Introduzione all'HTML
In questa lezione impareremo:
a riconoscere la sintassi dei comandi
principali dell’HTML
a realizzare pagine HTML attraverso i
tag più comuni
a utilizzare i tag di definizione
paragrafi
a utilizzare i tag per la formattazione
del testo
HTML (Hyper Text Markup
Language)
HTML linguaggio del WWW
Studiato dal Cern di Ginevra nel 1989 per la
cooperazione di gruppi di ricerca, basato su tre
standard:
• HTTP, un protocollo per la trasmissione di documenti
su Internet
• URL, una notazione per l’indirizzamento
• delle risorse
• HTML, un linguaggio per la scrittura di documenti
ipertestuali
Le pagine HTMLe Web
Pagine HTML ospitate su server web e
visualizzate dai client attraverso l’utilizzo di
un browser web (Internet Explorer, Firefox,
Opera, Chrome,Safari)
L’indirizzo web (URL), dopo connessione
HTTP, richiede la pagina al server in cui è
memorizzata e la scarica per essere
visualizzata dal browser
Browser
Il broswer interpreta la pagina che contiene il
codice sorgente (scritto in HTML) e visualizza il
risultato a video
URL
Un URL è formato da tre parti:
• dal protocollo utilizzato per il trasferimento
dati (HTTP)
• dall’indirizzo del server su cui risiede la
risorsa
• dal percorso della pagina presente sul server
Linguaggio HTML
Linguaggio di contrassegno che
permette di indicare come disporre gli
elementi all’interno di una pagina
Tali indicazioni vengono date attraverso i
comandi (minuscoli o maiuscoli è
indifferente) che si chiamano tag
Non contiene istruzioni operative (ad
esempio input, cicli o condizioni) e
strutture dati (ad esempio variabili)
Linguaggio HTML
L’estensione dei file che contengono
codice HTML è .htm o .html
(indifferentemente)
Il linguaggio HTML è stato ratificato e
definito dal W3C (World Wide Web
Consortium, www.w3c.org), l’organismo
che definisce gli standard di questo
linguaggio a livello mondiale
XHTML
XHTML è un modo con il quale scrivere HTML
per maggiore chiarezza
I comandi HTML devono essere scritti tutti in
minuscolo e devono sempre essere usati i tag
di chiusura (es. <b>...</b>)
I comandi che non possiedono tag di chiusura
è necessario aggiungere uno slash alla fine
(es. <br />)
I tag HTML
Start tag (tag apertura) e End tag (Tag di
chiusura) tra parentesi angolari (es. <h1> e
</h1>)
Scrivere una pagina HTML
Per scrivere una pagina è sufficiente aprire il un
editor qualunque e salvare la pagina in formato
testo con estensione .htm oppure .html
Scrivere una pagina HTML
Per verificarne il funzionamento basta
aprire la pagina con un browser, in
questo caso Chrome
Struttura documento HTML
Una pagina HTML possiede una
struttura logica di tipo gerarchico, le cui
parti principali sono due, denominate
rispettivamente head, che significa
intestazione, e body, il corpo della
pagina
Struttura documento HTML
Validazione dei siti
Un sito internet si dice valido quando rispetta
gli standard definiti dal W3C
La validazione avviene inserendo la pagina
principale del sito all’indirizzo
http://validator.w3.org
La validazione è necessaria per utilizzare
alcune applicazioni come ad esempio un
contatore di visite ufficiale oppure un sistema
di pagamento online
Il titolo della pagina
Corpo del documento (body)
Margini
Proprietà del tag <body>
Immagine di sfondo fissa
<body text=”white” link=”yellow”
background=”erba.jpg”
bgproperties=”fixed”>
Tag di paragrafo <p>
Il tag di paragrafo <p> viene utilizzato anche
per definire l’allineamento del testo, grazie
all’attributo align
<p align=”allineamento”>testo </p>
Gli allineamenti possono essere:
• left allinea il paragrafo a sinistra (predefinito)
• right allinea il paragrafo a destra
• center allinea il paragrafo al centro
• justify giustifica il paragrafo
Esempio
Tag di paragrafo <div>
a differenza di <p> il tag <div> non inserisce
gli spazi all’inizio e alla fine del paragrafo
marcato
Tag <hr> per creare una riga
Il tag <hr> possiede i seguenti attributi:
• align “center” oppure “right” o “left”
• width definisce la larghezza orizzontale della
linea. Può anche essere espressa in percentuale
o in pixel
• size definisce lo spessore della riga espressa in
pixel o in percentuale
• color definisce il colore
• noshade elimina l’effetto 3D della linea
Esempio
Tag <font>
Esempio
Esempio con vari stili di
carattere
Tag <Hn> per le intstazioni di
paragrafo