Web Publishingcorso base
HtmlConcetti fondamentali
Matteo Ziviani - scuolagrafica.sanzeno.org
Il linguaggio descrittivo per il Web*
Laboratorio MultimedialeClassi prime
PRIMA PARTE
La tecnologia utilizzata
I siti web sono composti da tre elementi fondamentali
• Client• Server• Network
Gli standard per il web sono regolati dal World Wide Web Consortium (W3C) che definiscono le regole base per le tecnologie, le reti e i relativi protocolli.
Definizione di sito
Un sito web o sito Internet è un insieme di pagine web correlate, ovvero una struttura ipertestuale di documenti che risiede su un server web.
index.html
chi-sono.html
contatti.html
chi-sono.html
contatti.htmlsito
Struttura tecnica di una pagina web
• La struttura HTML è la base della pagina web e serve per descrivere gli elementi (es. se noi utilizziamo il tag <h1> il contenuto verrà descritto come titolo importante)• I CSS servono per definire come verrà presentato l’html (tipo di font, colore, posizione ecc..)• Il JAVASCRIPT serve per inserire interattività tra utente e html/css
• L’HTML è la struttura, non deve essere complessa e deve avere senso anche senza il rendering dei css o javascript• I CSS e i JAVASCRIPT è consigliato tenerli in file separati .css o .js• Separare sempre la presentazione dalla struttura
immaginiaudio/video
ecc...
Markup Languages
• Il fondamento di ogni pagina web è il markup che nel caso del web è HTML.
• Un documento HTML è un file di testo
• Per visualizzare le pagine web si utilizza un software chiamato Browser
Il Browser
• Il programma usato per navigare e visualizzare le pagine web si chiama BROWSER
• 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 contenute le renderizza
L’HTML Hypertext Markup Language• È il linguaggio di descrizione utilizzato per le pagine web
• Gli elementi HTML descrivono cos’è quella determinata informazioni, non come verrà visualizzata e/o stampata.
• I contenuti di un documento, siano essi testi, immagini, suoni, animazioni o quant’altro, sono formattati attraverso l’ausilio di marcatori o tag. (tag=munire di un'etichetta)
• Con l’HTML si definisce solo la struttura e non la grafica
Esempio di HTML come struttura
Esempio di HTML come struttura
Pagina identica senza la grafica CSS e solo lastruttura HTML
Estensioni dei File
.htmlIl nome del file deve comprendere come estensione (elemento finale del nome)
la stringa .html (attenzione al punto)
dove-siamo.html
Grammatica dei TAG
• All’interno di ogni pagina è presente una serie di marcatori (TAG) a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda del loro significato (semantica).
<tag>contenuto del tag </tag>
Grammatica dei TAG
• All’interno di ogni pagina è presente una serie di marcatori (TAG) a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda del loro significato (semantica).
<tag>contenuto del tag </tag>apeturachiusura
Esempio (h1 = titolo)
<h1>contenuto del tag </h1>il titolo inizia da qui Il titolo
finisce qui
Grammatica dei TAG
• Alcuni tag non hanno bisogno di una chiusura
TAG ELEMENTOnon è obbligatoria la chiusura
<tag />
Grammatica dei TAG #2
• In alcuni elementi è possibile inserire degli attributi che servono per descrivere e caratterizzare il TAG. Gli attributi vanno inseriti all’interno del tag di apertura e sono seguiti da uguale (<TAG attributo=“value” >). Il valore dell’attributo deve essere tra virgolette “”.
<tag attributo =“valore”>contenuto del tag </tag>
<tag attributo =“valore”>
ESERCIZI SULLA GRAMMATICA
• Scrivi correttamamente i seguenti tag con i relativi attributi
Tag Chiusura Attributi Valore
1 h1 si
2 meta no namecontent
robotsindex
3 img no widthheight
300px200px
4 br no
5 p si style color:red;
6 strong si id testo-colorato
7 em si class enfasi
Nidificazione dei Tag
• I Tag possono essere annidati l'uno dentro l'altro.
• Molto importante è l’ordine di apertura e chiusura dei tag. RICORDA LE PARENTESI DELLE ESPRESSIONI DI MATEMATICA
errato
<tag> testo <tag2>testo </tag></tag2>
corretto
<tag> testo <tag2>testo </tag2></tag>
Nidificazione dei Tag
<tag>
<tag2>contenuto del tag</tag2>
<tag3>contenuto del tag</tag3>
</tag>
Semantica
RICORDAI tag aggiungono un significato a quello che
contengono
Scegli sempre il tag corretto in funzione del contesto e del significato che vuoi dare al contenuto
<h1> Esercizio 1 esempio </h1>
“Esercizio 1 esempio” marcato con <h1> prende il significato di titolo principale della pagina
H1 = Titolo principale
La struttura di una pagina HTML
• Per rendere un documento valido bisogna inserire prima del tag di apertura la dichiarazione del DOCTYPE per definire il tipo di documento
<!DOCTYPE html>
• Successivamente si utilizza il tag <html>
<!DOCTYPE html><html>
</html>
La struttura di una pagina HTML
La struttura di una pagina HTML
• All’interno dell’html la prima sezione è quella di intestazione. La HEAD contiene informazioni non visibili dagli utenti, ma che definiscono il modo in cui il documento deve essere letto e interpretato
<!DOCTYPE html><html>
<head></head>
</html>
La struttura di una pagina HTML
• All’interno dell’html dopo la <head> deve essere inserito il corpo della pagina, BODY che racchiude il contenuto vero e proprio del documento
<!DOCTYPE html><html>
<head></head>
<body></body>
</html>
Head
I tag dell’intestazione
Matteo Ziviani – scuolagraficasanzeno.com
L’intestazione
• All’interno dell’intestazione è obbligatorio inserire il tag TITLE, che identifica il titolo della pagina web)
• In questo titolo è necessario inserire parole chiave per l’indicizzazione del motore di ricerca e inoltre bisogna inserire nel titolo l’effettivo contenuto della pagina
<head><title>titolo della pagina</title>
</head>
Il meta tag per i caratteri
• Per poter interpretare correttamente i caratteri è necessario specificare il meta con la codifica dei caratteri specifica
<meta charset=”mappacaratteri” />
La mappa caratteri più utilizzata che comprende lettere accentate e caratteri speciali è la UTF-8
<meta charset=”utf-8” />
I meta tag
• I meta tag hanno valenza minima• alcuni sono specifici per i motori di ricerca, altri per attivare alcune opzioni
dei browser o per i dispositivi mobile.• La struttura dei meta tag è:
<meta name=”TYPE" content=”Contenuto” />
I meta tag dedicati ai motori di ricerca sono due (TYPE):• DESCRIPTION: Questo meta tag permette di inserire una descrizione dei
contenuti della pagina web in cui esso appare.• ROBOTS: i valori di content possono essere INDEX, FOLLOW, NOINDEX,
NOFOLLOW” sono consigli per i motori di ricerca sul come procedere per l’indicizzazione.
Il meta tag ROBOTS è un utile strumento per controllare i comportamenti degli spider, ma non è l'unico. Un altro mezzo è l’utilizzo del file robots.txt
Stili CSS
Per poter collegare uno stile css esterno nella <head> è necessario utilizzare il tag <link>
<link rel=”stylesheet” href=”percorso” media=”media” />Nell’attributo href va specificato il percorso di dove si trova il file css mentre nell’attributo media si specifica per quale media deve essere applicato lo stile (screen, print, all ecc…)
Se si vuole implementare uno stile internamente si utilizza, sempre nella <head> il tag <style>
•<style > </style>
Body
I tag del corpo
Matteo Ziviani – scuolagraficasanzeno.com
Rappresentazione dei tag
• Tutti i tag che si vanno ad inserire sono rappresentati come dei rettangoli (box) indipendentemente che questi siano paragrafi, titoli, tabelle, immagini ecc…
BOX RETTANGOLARI
Rappresentazione dei tag
Classificazione dei tag
• Dall’immagine precedente si può vedere che i box non sono tutti uguali, infatti questi possono essere distinti in tag BLOCCO o INLINE (in linea)
Gli elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento.
Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline . Quando sono inseriti nel documento non danno origine ad una nuova riga.
Tag di testo
32
tag esempio definizione
h1, h2, h3, h4, h5, h6 <h1>titolo</h1> Titoli, i numeri definiscono una importanza ed una gerarchia (tag blocco)
p <p>testo</p> testo di paragrafo (tag blocco)
br <br /> a capo forzato
strong <p> <strong>testo</strong></p>
bold, enfasi (tag inline)
em <p> <em>testo</em></p>
italic, enfasi (tag inline)
Quelli presentati sono una sintesi. Altri tag si possono trovare sul pdf “html cheatsheet”
Esercizi
Svolgere i seguenti esercizi1.11.2
Matteo Ziviani – scuolagrafica.sanzeno.org
Tag di immagine, link e lista
34
tag attributi esempio definizione
img src, alt <img src=”img.jpg” alt=”altalena” /> immagine (tag inline)
a href, target <a href=”index.html”>Home</a> collegamento interno o esterno (tag inline)
ol, ul <ol> ... </ol><ul> ... </ul>
Definiscono il tipo di lista, ordinata o non ordinata (tag blocco)
li <ol> <li>Home</li></ol>
elemento della lista (tag blocco)
Quelli presentati sono una sintesi. Altri tag si possono trovare sul pdf “html cheatsheet”
Immagini
In html è possibile inserire pochi formati immagine. I più comuni sono JPG, PNG (8 e 24 bit) e GIF.
L’immagine non si visualizza?
1. Controlla se il formato immagine è corretto2. Controlla il nome del file (togliere gli spazi e i caratteri speciali,
verificare che sia presente anche l’estensione)3. Controlla il tag immagine se è scritto correttamente e controlla
l’attributo src (spesso si scrive scr che è errato)4. Verificare se il file si trova nella cartella giusta e se si è scritto il
percorso correttamente (vedi slide precedenti)
Percorsi (Path)
•Per poter collegare i vari media correttamente (css, immagini, video, audio ecc…) è molto importante definire correttamente il percorso del file.•Quando si scrivere un percorso bisogna sempre tenere in considerazione la posizione del file di origine
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine “logo-nike.gif” nel file “index.html”
Origine index.html
File da collegare logo-nike.gif
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path)
•Per poter collegare i vari media correttamente (css, immagini, video, audio ecc…) è molto importante definire correttamente il percorso del file.•Quando si scrivere un percorso bisogna sempre tenere in considerazione la posizione del file di origine
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine “logo-nike.gif” nel file “index.html”
Origine index.html
File da collegare logo-nike.gif
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path)
•Per poter collegare i vari media correttamente (css, immagini, video, audio ecc…) è molto importante definire correttamente il percorso del file.•Quando si scrivere un percorso bisogna sempre tenere in considerazione la posizione del file di origine
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine “logo-nike.gif” nel file “index.html”
Origine index.html
File da collegare logo-nike.gif
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
images/logo-nike.gif
Percorsi (Path) #2
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare la pagina “index.html” alla pagina “dove-siamo.html”
Origine index.html
File da collegare dove-siamo.html
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path) #2
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare la pagina “index.html” alla pagina “dove-siamo.html”
Origine index.html
File da collegare dove-siamo.html
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path) #2
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare la pagina “index.html” alla pagina “dove-siamo.html”
Origine index.html
File da collegare dove-siamo.html
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
dove-siamo.html
Percorsi (Path) #3
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare il file “grafica.css” alla pagina “index.html”
Origine index.html
File da collegare grafica.css
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path) #3
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare il file “grafica.css” alla pagina “index.html”
Origine index.html
File da collegare grafica.css
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path) #3
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare il file “grafica.css” alla pagina “index.html”
Origine index.html
File da collegare grafica.css
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
css/grafica.css
Percorsi (Path) #4
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine “logo-nike.gif” al file “grafica.css”
Origine grafica.css
File da collegare logo-nike.gif
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path) #4
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine “logo-nike.gif” al file “grafica.css”
Origine grafica.css
File da collegare logo-nike.gif
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
Percorsi (Path) #4
sito “XXX”
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine “logo-nike.gif” al file “grafica.css”
Origine grafica.css
File da collegare logo-nike.gif
Percorso (che strada devo fare partendo dall’origine per arrivare al file da collegare?)
../images/logo-nike.gif
Esercizio Percorsi Inversi
Definisci la struttura delle cartelle dei seguenti percorsi
1. www.google.com/images/albero.jpg2. images.facebook.com/imm/5/matteo.png3. www.youtube.com/video/playlist/lezione1.mp4
Soluzione 1
www.google.com
albero.jpg
1. www.google.com/images/albero.jpg
images
Soluzione 2
images.facebook.com
matteo.png
2. images.facebook.com/imm/5/matteo.png
imm
5
Soluzione 3
www.youtube.com
lezione1.mp4
3. www.youtube.com/video/playlist/lezione1.mp4
video
playlist
Esercizio
Svolgere il seguente esercizio1.3
Matteo Ziviani – scuolagrafica.sanzeno.org
Tag tabella
53
tag attributi esempio definizione
table <table>... </table> definisce la tabella (tag blocco)
tr <table> <tr>...</tr></table>
riga di una tabella
td, th colspan, rowspan
<table> <tr> <th>cella</th> <td>cella</td> </tr></table>
td: cella di una tabellath: cella di titolazione
caption <table> <caption>didascalia</caption></table>
didascalia della tabella
Quelli presentati sono una sintesi. Altri tag si possono trovare sul pdf “html cheatsheet”
Esempio tabella
Proviamo a costruire questa tabella
Esempio tabella #1
1. Definire la tabella con il tag <table>
<table>
</table>
Esempio tabella #2
2. Dichiarare da quanterighe è composta <tr>
<table><tr>
</tr>
<tr>
</tr></table>
Esempio tabella #2
3. Dichiarare il numero di celle <td> per ogni riga
<table><tr>
<td> </td> <td> </td></tr>
<tr><td> </td> <td> </td>
</tr></table>
Esercizio
Converti la seguente tabella in html utilizzando i tag fondamentali <table> <tr> <td>
Esercizio #2
Analizzando il codice html disegna la tabella descritta
1. <table>2. <tr>3. <td> c1 </td> <td> c2</td> <td> c3</td> 4. </tr>5. <tr>6. <td> c4 </td> <td> c5</td> <td> c6</td> 7. </tr>8. <tr>8. <td> c7 </td> <td> c8</td> <td> c9</td> 10. </tr>11. </table>
Esercizio #2 soluzione
Analizzando il codice html disegna la tabella descritta
1. <table>2. <tr>3. <td> c1 </td> <td> c2</td> <td> c3</td> 4. </tr>5. <tr>6. <td> c4 </td> <td> c5</td> <td> c6</td> 7. </tr>8. <tr>8. <td> c7 </td> <td> c8</td> <td> c9</td> 10. </tr>11. </table>
Esercizio #2 soluzione
Analizzando il codice html disegna la tabella descritta
1. <table>2. <tr>3. <td> c1 </td> <td> c2</td> <td> c3</td> 4. </tr>5. <tr>6. <td> c4 </td> <td> c5</td> <td> c6</td> 7. </tr>8. <tr>8. <td> c7 </td> <td> c8</td> <td> c9</td> 10. </tr>11. </table>
Esercizio #2 soluzione
Analizzando il codice html disegna la tabella descritta
1. <table>2. <tr>3. <td> c1 </td> <td> c2</td> <td> c3</td> 4. </tr>5. <tr>6. <td> c4 </td> <td> c5</td> <td> c6</td> 7. </tr>8. <tr>8. <td> c7 </td> <td> c8</td> <td> c9</td> 10. </tr>11. </table>
Esercizio
Svolgere il seguente esercizio1.4
Matteo Ziviani – scuolagrafica.sanzeno.org
Nominare i tag
Esistono attributi comuni a tutti i tag. Uno di questi è id che permette di mettere un nome ad un tag
<TAG id=“nome”>contenuto del tag </TAG>
Il nome permette una miglior comprensione del codice ma soprattutto permette di poter associare correttamente gli stili CSS.
REGOLE1. il primo carattere non può essere un numero2. non deve contenere spazi3. non deve contenere lettere accentate, caratteri speciali4. deve essere univoco all’interno del documento html