HTML corso base (classi prime, mod 1)

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>



• 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


<head></head>

</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


<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)


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)


sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine index.html



Percorsi (Path)


sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine index.html



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


Percorsi (Path) #2

sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine index.html



Percorsi (Path) #2

sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine index.html



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


Percorsi (Path) #3

sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine index.html



Percorsi (Path) #3

sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine index.html



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



Percorsi (Path) #4

sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine grafica.css



Percorsi (Path) #4

sito “XXX”

index.html

css

dove-siamo.html

grafica.css

images

logo-nike.gif


Origine grafica.css



../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


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


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









Esercizio

Svolgere il seguente esercizio1.4


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

Technology

HTML corso base (classi prime, mod 1)