La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Introduzione all’HTML

Presentazioni simili


Presentazione sul tema: "Introduzione all’HTML"— Transcript della presentazione:

1 Introduzione all’HTML
Esercizi Introduzione all’HTML

2 Il WWW Il World Wide Web: una “rete” di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare Il client (il browser Web) visualizza le pagine Web Rete Client Server Web

3 L’HTML e le pagine Web Il linguaggio HTML (Hyper-Text Markup Language) serve per definire l’impaginazione e l’aspetto grafico delle pagine Web Non è un linguaggio di programmazione! E’ un linguaggio di impaginazione detto “a marcatura” Una pagina HTML è un file composto da puro testo Lo standard supporta diverse codifiche La più comune: ISO (è una variante ASCII) Elementi quali immagini, suoni, filmati, ecc. sono contenuti in file separati Pagina Web: pagina HTML + ulteriori file (immagini, suoni, ecc.)

4 I tag. Il processo di rendering
Si usano particolari comandi (detti tag), inseriti nel testo, per indicare al browser come deve impaginare e visualizzate la pagina Web nel suo insieme Il browser interpreta i tag, formatta la pagina Web e ne genera la rappresentazione grafica (il rendering) HTML Il motore di rendering del browser Immag. audio, ecc. La finestra del browser

5 La mia prima pagina HTML
<head> <title>Questo è un esempio</title> </head> <body> Ciao! Questo è un esempio di pagina HTML </body> </html> Scrivete il file con un editor di testo Salvate il file (con estensione .html o .htm) Aprite il file con un browser

6 La mia prima pagina HTML
Titolo Nome del file Non va a capo!

7 La sintassi dei tag Quasi tutti i tag sono composti da un tag di apertura e da un tag di chiusura: <nome_tag>testo sul quale il tag agisce</nome_tag> Es.: <title>Questo è un esempio</title> Alcuni tag non hanno la corrispondente chiusura: <nome_tag> Es.: <br> Per molti tag è possibile specificare degli attributi: <nome_tag nome_attributo="valore_attributo"> Es.: <body bgcolor="red"> … </body>

8 Formattazione “logica”
L’idea iniziale dell’HTML: esprimere il significato “logico” del testo, non la rappresentazione grafica La traduzione verso una certa rappresentazione grafica è lasciata interamente al browser Alcuni tag: Paragrafo: <p> Evidenziazione di testo: <strong>, <em> Titoli: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Formato “indirizzo”: <address> Per alcuni di questi tag è possibile specificare degli attributi.

9 Formattazione “logica”
<html> <head> <title>Questo è un esempio</title> </head> <body> <h1>Titolo principale</h1> <h2>Titolo secondario</h2> <p>Testo all'interno <em>di un</em> <strong>paragrafo</strong></p> <p>Altro paragrafo</p> Testo al di fuori di un paragrafo <p>indirizzo: <address>Via Ponzio 34/5, Milano</address></p> </body> </html>

10 Formattazione “logica”

11 Formattazione “fisica”
Specifica la rappresentazione grafica Alcuni tag: Neretto: <b> Italico: <i> Apice: <sup> Pedice: <sub> Barrato: <del> Sottolineato: <u> Forza il ritorno a capo: <br> Specifica il carattere tipografico: <font> Gli attributi permettono di variare l’impaginazione standard: <h1 align="center">

12 Formattazione “fisica”
<html> <head> <title>Questo è un esempio</title> </head> <body bgcolor="yellow"> <p>Normale, <b>neretto</b>, <i>italico</i>, <sup>apice</sup>, <sub>pedice</sub>, <del>barrato</del>, <u>sottolineato</u></p> <p>Inizio paragrafo<br>va a capo</p> <p align="center"> <font face="Courier New" size="5" color="red">Parolona!</font> </p> </body> </html>

13 Formattazione “fisica”

14 Elenchi I seguenti tag servono per specificare vari tipi di elenchi:
Elenco puntato: <ul> Varianti dell’elenco puntato: <ul type="square">, <ul type="disc">, <ul type="circle"> Elenco numerato: <ol> Varianto dell’elenco numerato: <ol type="a">, <ol type="A"> <ol type="i">, <ol type="I"> Ogni voce dell’elenco è racchiusa da <li>

15 Elenchi <html> <head>
<title>Questo è un esempio</title> </head> <body> <ul> <li>Primo elemento</li> <li>Secondo elemento</li> </ul> <ul type="square">

16 Elenchi <ol> <li>Primo elemento</li>
Elemento scorretto <li>Secondo elemento</li> </ol> <ol type="i"> <ol type="A"> </body> </html>

17 Elenchi

18 Le tabelle Il testo (e in generale qualsiasi elemento grafico) può essere formattato sotto forma di tabella: Tabella: <table> Titolo: <th> Riga: <tr> Colonna: <td> E’ possibile specificare alcuni attributi: spessore del bordo, distanza tra le celle, margine all’interno delle celle.

19 Le tabelle <html> <head>
<title>Questo è un esempio</title> </head> <body> <table border="5" cellspacing="10" cellpadding="20"> <th>Colonna1</th><th>Colonna2</th> <tr><td>Uno</td><td>Due</td></tr> <tr><td>Tre</td><td>Quattro</td></tr> </table> </body> </html>

20 Le tabelle

21 I link Servono per creare connessioni navigabili
Link interni alla stessa pagina Link tra pagine Link: <a href="indirizzo">qualsiasi cosa</a> Facendo click su qualsiasi cosa, il browser si sposta a indirizzo Indirizzo può essere una URL o un’àncora o una combinazione delle due Àncora: <a name="nome"> Definisce una etichetta alla quale un link può puntare Di solito è usata per far spostare il browser in un altro punto, all’interno della stessa pagina che contiene il link

22 I link <html> <head>
<title>Questo è un esempio</title> </head> <body> <p><a href="http://www.polimi.it">Vai al Politecnico di Milano</a></p> <p><a href="http://www.elet.polimi.it/ corsi/infoA/01_intro_corso_InfA.pdf"> Introduzione InfoA (file PDF)</a></p> <p><a href="#fine">Vai in fondo alla pagina</a></p> <br>bla bla<br><br><br><br><br><br><br><br> <a name="fine"><p>Fine della pagina</p> </body> </html>

23 I link

24 Le immagini E’ possibile includere immagini:
<img src="indirizzo e nomefile immagine"> Alcuni attributi permettono di modificare le dimensioni dell’immagine: Es.: <img src="a.gif" height="50" width="70"> Es.: <img src="a.gif" height="50%" width="5%">

25 Le immagini <html> <head>
<title>Questo è un esempio</title> </head> <body> <p>Un po' di testo... e un'immagine</p> <p align="center"> <img src="sosta.jpg"> <br> Un buon posto per parcheggiare!</p> </body> </html>

26 Le immagini

27 Caratteri speciali Per inserire caratteri che non si trovano sulla tastiera, per es. ¥, Ç, Ø, ¾,… Per “mascherare” i caratteri < e > Voglio far comparire i caratteri “<br>” nella pagina La sintassi: &nome_carattere; < < > > ¥ ¥ e tanti, tanti altri…

28 Mettendo insieme il tutto…
<html> <head> <title>Questo è un esempio</title> </head> <body> <table border="1" align="center" bgcolor="yellow"> <tr> <td> <a href="sosta.jpg"> <img src="sosta_mini.jpg"></a> </td> <p align="center">Parcheggio</p> <p><font color="red">← fai click</font></p> </tr>

29 Mettendo insieme il tutto…
<tr align="right"> <td> <p align="center">Divieto</p> <h1>fai click →</h1> </td> <a href="divieto.jpg"> <img src="divieto_mini.jpg"></a> </tr> </table> <p>Il tag <br> forza il ritorno a capo</p> </body> </html>

30 Mettendo insieme il tutto…

31 Il Mio Sito <html> <head>
<title>Il Mio Primo Sito!!!</title> </head> <body> <h1>La mia home page</h1> <p><a href="prova.html">Formattazione "logica"</a></p> <p><a href="prova2.html">Formattazione "fisica"</a></p> <p><a href="prova3.html">Elenchi</a></p> <p><a href="prova4.html">Tabelle</a></p> <p><a href="prova5.html">Link</a></p> <p><a href="prova6.html">Immagini</a></p> <p><a href="prova7.html">Complesso</a></p> </body> </html>

32 Il Mio Sito Creiamo la cartella IlMioSito e copiamo tutti i file HTML e le immagini index.html è, per convenzione, il nome del file che contiene la home page Apriamo index.html con un browser…

33 Il Mio Sito

34 Riferimenti I “padri” del WWW: http://www.w3c.org Tutorial sull’HTML:
Manuale sull’HTML, in PDF: Manuale di riferimento per i tag HTML Tabella caratteri speciali:


Scaricare ppt "Introduzione all’HTML"

Presentazioni simili


Annunci Google