Hyper Text Markup Language

HTML
Hyper Text Markup Language
IL WEB
Le componenti principali del web sono:
•  HTML: definizione del contenuto delle pagine
•  CSS: definizione dell’aspetto delle pagine
•  Javascript: definizione del comportamento delle pagine
•  PHP: accesso ai dati persistenti su un DBMS
Noi affronteremo solo i primi due aspetti per la
realizzazione di siti statici.
HTML e CSS
•  HTML sta per Hyper Text Markup Language che significa:
linguaggio di contrassegno per ipertesti.
•  Cos’è un ipertesto? Un ipertesto è un insieme di testi
messi in relazione tra loro tramite collegamenti e parole
chiave.
•  Cosa usiamo per “contrassegnare”? L’HTML è un
linguaggio che utilizza i “tag”.
•  Cos’è un “tag”? Si tratta di marcatori che identificano e
controllano la presenza, la disposizione e l’aspetto degli
elementi contenuti nel mio ipertesto.
Esempio: <tag> il mio contenuto </tag>
HTML e CSS
•  L’HTML non è un vero e proprio linguaggio di
“programmazione” si tratta di un linguaggio che serve a
dichiarare la struttura del mio ipertesto, se lo vogliamo
vedere sotto un altro aspetto si tratta di un linguaggio per
programmare ipertesti.
•  CSS: Cascading Style Sheet – Fogli di Stile a Cascata
•  Il CSS è un linguaggio che definisce l’aspetto dei nostri
ipertesti, che d’ora in poi diventeranno vere e proprie
pagine web.
•  Il CSS è inglobato all’interno dell’HTML dato che sono
strettamente legati l’uno all’altro.
•  Il CSS ci permette di dare il nostro stile al nostro sito web.
HTML e CSS - Riassunto
•  L’HTML definisce la struttura ed il contenuto del
documento, quindi della nostra pagina web.
•  Il CSS definisce la presentazione grafica degli elementi
presenti all’interno del nostro documento.
I tag
•  Il formato generale di un tag è il seguente:
<tag [attributo="valore"] ... > contenuto del tag </tag>
•  < >: le parentesi angolari delimitano l’inizio e la fine di
ogni elemento.
•  tag: (nome del tag)identifica l’oggetto da trattare.
•  attributo: (nome dell’attributo) è una proprietà del tag che
si vuole specificare, è opzionale.
•  valore: (valore dell’attributo) identifica il valore che si
vuole attribuire alla proprietà specificata prima.
La coppia attributo valore si può ripetere per specificare
varie proprietà dell’elemento che sto dichiarando.
I tag
•  contenuto: (codice HTML) è il contenuto vero e proprio
del tag e può comprendere altro HTML oppure semplice
testo.
•  </tag>: (fine del tag) identifica la fine dell’elemento che
sto dichiarando.
I tag - Esempio
Codice HTML:
<p style="text-align:center; border:1pt solid;" >
colore predefinito
<span style="color:red;">
colore rosso
</span>
colore predefinito
</p>
Risultato:
colore predefinito colore rosso colore predefinito
La nostra prima pagina
•  I file HTML e CSS vengono creati tramite un semplice
editor di testo. Alcuni esempi sono blocco note, notepad+
+, ecc…
•  Per creare un file HTML basterà aprire un documento
bianco e salvarlo come “nome del mio documento.html”.
•  Un documento HTML è aperto e chiuso dal tag
<html> … </html>
•  È di norma suddiviso in due parti: l’intestazione
(<head>…</head>) e il corpo (<body>…</body>).
•  Per una migliore lettura del codice è molto importante
l’indentazione.
Indentazione
•  È una modalità di scrivere codice HTML, e non, che
facilità la lettura di chi scrive e di chi legge.
•  Come si applica? Ogni volta che ho aperto un tag vado a
capo e indento semplicemente schiacciando il tasto TAB,
che ha questo simbolo “ à| “, e ogni volta che lo chiudo,
invece torno indietro esattamente dello stesso spazio. Es:
<tag1>
contenuto
<tag2>
contenuto
</tag2>
contenuto
</tag1>
Schema di base
<html>
<head>
…intestazione del documento…
</head>
<body>
…corpo del documento…
</body>
</html>
L’intestazione
•  La <head> contiene informazioni che servono al browser
per interpretare nel modo giusto la pagina.
•  I principali tag di intestazione sono i suguenti:
•  <title> Titolo </title> identifica il titolo della
pagina che verrà visualizzato nella scheda del
browser.
•  <style> Codice CSS </style> specifica le
regole CSS da applicare al documento HTML
stesso per la corretta visualizzazione della
pagina.
Il corpo del documento
•  Il <body> definisce la struttura della pagina, contiene
codice HTML, testi e immagini che verranno poi
visualizzate dal browser.
•  In seguito vedremo tutti i principali tag che si trovano
all’interno del <body>
•  Per effettuare un commento in HTML, ovvero inserire del
testo all’interno del codice sorgente che però non verrà
visualizzato nella pagina vera e propria, si usa la
seguente sintassi:

Testo e paragrafi
•  Nel linguaggio HTML esistono tre tipi di tag per
identificare un raggruppamento di testo, altrimenti detto
paragrafo. Sono i seguenti:
•  <p>…Testo…</p> blocco di testo preceduto e
seguito da una riga bianca.
•  <div>…Testo…</div> blocco di testo senza
formattazione, che può contenere anche altri
sottoblocchi.
•  <span>…Testo…</span> blocco di testo in
linea. Identifica un gruppo di parole sulla stessa
riga.
Testo e paragrafi
•  Per quanto riguarda gli spazi e gli a capo in HTML ci sono
parole riservate:
•  <br> uno dei pochi tag che non ha bisogno di
essere chiuso e identifica “l’a capo” che
altrimenti in HTML non esisterebbe.
•  &nbsp; identifica uno spazio. Infatti in HTML
data un riga formata tutta da spazi solamente il
primo verrà letto come tale per i restanti
bisogna usare questa parola riservata.
Immagini
•  Per aggiungere un immagine in mezzo al nostro testo
basterà includere il seguente tag:
<img src=“dove si trova l’immagine”>
•  Nell’attributo “src” bisognerà specificare dove si trova
l’immagine per adesso basterà inserire l’indirizzo internet
a cui fa riferimento ad esempio:
<img src”=https://scontent-b-mxp.xx.fbcdn.net/hphotos-ash3/579596_3944415685161_1568079572_n.jpg”>
Che restituirà questo:
Un po’ di stile
•  Queste sono alcune proprietà CSS semplici che vi
potranno servire per creare una semplice pagina web.
•  Per applicare il CSS a un elemento basta che
specifichiate l’attributo “style” dell’elemento con all’interno
le regole che volete applicare separate da un “;” (punto e
virgola)
•  Esempio:
<div style=“parametro: valore; parametro2: valore2; parametro3: valore3;”>
contenuto
</div>
Al posto di parametro e valore potrete usare le sueguenti:
Un po’ di stile
PROPRIETA’
VALORE
background
Identifica il colore di sfondo dell’elemento. Come
valore gli si può attribuire un colore scritto in inglese
ad esempio: red, green, blue, lightgreen, black,
ecc…
color
Identifica il colore del testo. Come valore si possono
usare sempre i colori scritti in inglese
border
Identifica il bordo dell’elemento: può essere “none”,
senza bordo, o in alternativa ha bisogno che tre
parametri siano specificati:
•  Altezza: un numero seguito da “px” es: 3px
•  Tipo: può essere: solid, dotted, inset, ecc..
•  Colore: colore scritto in inglese.
Il risultato sarà così: 3px solid black
Un po’ di stile
PROPRIETA’
VALORE
text-align
Identifica dove deve essere allineato il testo. Può
assumere i seguenti valori:
left, right, center, justify
font-weight
Ammette due valori: normal o bold, nel primo caso il
testo rimane invariato, nel secondo diventa grassetto.
font-style
Ammette due valori: normal o italic, nel primo caso il
testo rimane invariato, nel secondo diventa corsivo.
text-decoration Ammette due valori: none o underline, nel primo caso
il testo rimane invariato, nel secondo diventa
sottolineato.
font-size
Specifica l’altezza del carattere. Es: 30px
height, width
Specifica altezza e la larghezza dell’elemento.Es: 50px
Un po’ di stile - Esempio
<div style=“background: black; color: white; border: 3px solid red; text-align:
center; font-size 30px”>
Ciao
<span style=“font-weight:bold”>
Ragazzi
</span>.<br/>
E’ ora di
<span style=“font-style: italic; color: red; text-decoration: underline”>
Cominciare!
</span>
</div>
Risultato:
Ciao Ragazzi.
E’ ora di Cominciare!
HTML
Parte seconda
Elenchi
•  Esistono 2 tipi di elenchi in HTML, quelli puntati e quelli
numerati. Questi due tipi li potete riscontrare anche in
Word. Vediamo come sono fatti:
•  Elenco puntato
Elenco Numerato
•  Primo elemento
1.  Primo elemento
2.  Secondo elemento
•  Secondo elemento
3.  Terzo elemento
•  Terzo elemento
4.  …
•  …
•  Vediamo adesso come si realizza in HTML
Elenchi puntati - esempio
•  Elenco puntato:
<ul>
<li>Prima voce</li>
<li>Seconda voce</li>
<li>Terza voce</li>
</ul>
•  Il tag <ul> sta per “unordered list”.
•  il tag <li> sta per ”list item”.
•  Questi elementi ammettono tutti gli stili che abbiamo visto
la volta scorsa.
Elenchi numerati - esempio
•  Elenco numerato:
<ol>
<li>Prima voce</li>
<li>Seconda voce</li>
<li>Terza voce</li>
</ol>
•  Il tag <ol> sta per “ordered list”.
•  il tag <li> sta per ”list item”.
•  Questi elementi ammettono tutti gli stili che abbiamo visto
la volta scorsa.
Url assoluto
•  Cos’è una URL? URL è un metodo per identificare
univocamente una risorsa (file, immagini, siti, ecc…) nel
WEB o sul nostro computer. Spesso viene anche usato
l’appellativo di indirizzo.
•  Un url è composto da tre parti:
protocollo://dominio/percorso
•  Il protocollo: identifica che tipo di servizio dobbiamo offrire
o ottenere. Noi useremo sempre lo “http”.
•  Il dominio: è il posto dove si trova la risorsa che vogliamo
andare a inserire. Di solito si tratta di un sito internet.
•  Il percorso: è il percorso attraverso il quale possiamo
accedere al file che ci interessa. Vedremo alcuni esempi.
Url assoluto - esempi
•  http://google.it
•  http://masterchef.sky.it/
•  http://masterchef.sky.it/sito/immagini/chef.jpg
masterchef.sky.it/
•  sito
•  immagini
•  chef.png
Url relativo
•  È sostanzialmente solo l’ultima parte dell’URL assoluto.
Infatti utilizza solo il percorso per specificare a che risorsa
devo accedere.
•  L’URL relativo serve per accedere solamente alle risorse
che sono sul mio sito o sul mio computer.
•  Permette anche di accedere alle cartelle superiori tramite
la scrittura “../”
•  Vediamo un paio di esempi per chiarirci un po’ le idee.
MIO SITO
Pagine
Home.html
Seconda.html
Url relativo
esempi
Noi
Dobbiamo
stiamo
risalireafino
Adesso
andiamo
alla
programmando
cartella
mio la
sito,
pagina
trovare
l’immagine
che
Immagini
mentre
seconda.html
noi adesso
e vogliamo
ci interessa,
entriamo
siamo
aggiungere
nella un
cartella
immagine
nella cartella
Immagini:
pagine
che
si trova
quindi:
nella cartella
immagini,
particolare
../Immaginiin Background.jpg
../
Testa.jpg.
L’URL relativo
ci
aiuta
a raggiungere
E poi
selezioniamo
E siamo nella
l’immagine
attraverso
cartella
che
ci
MIO
pochi
SITO
passaggi.
interessa:
Testa.jpg
../Immagini/Testa.jpg
I link
•  Nelle pagine HTML è possibile realizzare collegamenti
esterni ad altre pagine.
•  Il tag da utilizzare è <a> ... </a>; il codice contenuto nel
tag diventa il collegamento attivo: può essere un testo o
un’immagine.
•  L’attributo impostabile del tag <a>, oltre allo style, è
sostanzialmente uno: l’ “href” , che indica il percorso della
pagina o della risorsa a cui si deve essere rimandati.
•  Cliccando sul link si viene reindirizzati alla risorsa
corrispondente all’url dell’href.
Link - esempi
•  Sempre secondo l’esempio della struttura precedente, se
ci troviamo nella pagina Home.html possiamo inserire un
link del tipo
<a href=“Seconda.html”>Vai alla seconda pagina</a>
•  Il risultato sarà il seguente
Vai alla seconda pagina
E cliccandoci sopra verrà caricata la pagina “Seconda.html”
•  Come potete notare abbiamo usato un URL relativo.
•  Se vogliamo caricare un immagine invece scriveremo così
<a href=“../Immagini/bg.jpg”>Vai all’immagine</a>
Vai all’immagine
Le ancore
•  Le ancore sono dei collegamenti interni alla pagina. Come
se fossero dei segnalibri.
•  Vengono visualizzati allo stesso modo dei link, ma
cliccandoci sopra veniamo semplicemente spostati in una
parte diversa della pagina (ad esempio in fondo).
•  Per crearne uno si utilizza sempre il tag <a> ma in
maniera diversa.
•  Dobbiamo specificare due cose per creare un ancora:
•  La bandierina o il segnaposto che indica il punto
della pagina dove vogliamo spostarci
•  Il link che attiva lo spostamento
Ancore - esempio
•  Per il segna posto:
<a name=“finedellapagina”></a>
•  Per il link che effettuerà lo spostamento:
<a href=“#finedellapagina”>Vai in fondo alla pagina</a>
•  L’HTML
…
<body>
<a href=“#finedellapagina”>Vai in fondo alla pagina</a>
… tanto testo in mezzo …
<a name=“finedellapagina”></a>
</body>
Tabelle
•  In HTML è possibile creare le tabelle.
•  Per le tabelle abbiamo a disposizione 3 tag:
•  <table>…</table> Identifica la tabella vera e proria
•  <tr>…</tr> Identifica una riga della tabella
•  <td>…</td> Identifica una cella della tabella
HTML
•  Esempio:
<table>
<tr>
A
B
C
D
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
Iframe
•  Gli iframe sono come dei box html, ad esempio una div,
che contengono al suo interno un’altra pagina. È un modo
semplice e veloce per inserire il contenuto di una pagina
esterna all’interno della mia.
•  Il codice HTML è molto semplice:
<iframe src=“pagina da includere.html”></iframe>
•  Con le proprietà CSS che conosciamo possiamo
specificare anche una altezza e una larghezza.
•  Nell’attributo “src” dobbiamo specificare la pagina html
che vogliamo includere sempre con la solita regola
dell’URL relativo.
L’HTML È GIA FINITO ;)